我试图创建一个用于从服务器获取数据的函数,并且它可以正常工作。
但是我不确定这是否正确吗?
我创建了一个函数组件来使用 useState , useEffect 和 Async/Await 来获取数据:
import React, { useState, useEffect } from "react";
const Fetch = () => {
const [data, setData] = useState(null);
useEffect(() => {
const fetchData = async () => {
let res = await fetch(
"https://api.coindesk.com/v1/bpi/currentprice.json" //example and simple data
);
let response = await res.json();
setData(response.disclaimer); // parse json
console.log(response);
};
fetchData();
}, []);
return <div>{data}</div>;
};
export default Fetch; // don't run code snippet, not working, this component must be imported in main
我不确定的地方是,其中到调用到 fetchData 函数。我在useEffect里面做吗?正确的地点?并且,此调用将仅发生一次?因为我使用 [] ?
通常,您将如何做这样的事情?
最佳答案
总体而言,您正在朝着正确的方向前进。为了获取数据,您需要使用useEffect
并将[]
作为第二个参数传递,以确保它仅在初始安装时触发。
我相信您可以通过解耦fetchJson
函数并使它更通用而受益,例如:
const fetchJson = async (url) => {
const response = await fetch(url);
return response.json();
};
const Fetch = () => {
const [data, setData] = useState(null);
useEffect(() => {
fetchJson("https://api.coindesk.com/v1/bpi/currentprice.json")
.then(({ disclaimer }) => setData(disclaimer));
}, []);
return <div>{data}</div>;
};
关于javascript - react useEffect钩子(Hook)和Async/await自己的获取数据功能?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/55008076/