[英]React useEffect hook and Async/await own fetch data func?
我试图创建一个从服务器获取数据的功能,它的工作原理。 但我不确定这是否正确?
我使用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 }) => setState(disclaimer));
}, []);
return <div>{data}</div>;
};
另一种选择是使用自调用函数:
const Fetch = () => {
const [data, setData] = useState(null);
useEffect(() => {
(async () => {
let res = await fetch(
"https://api.coindesk.com/v1/bpi/currentprice.json" //example and simple data
);
let response = await res.json();
setData(response);
})();
}, []);
return <div>{data}</div>;
};
将获取逻辑分离到单独函数的建议是个好主意,可以按如下方式完成:
const Fetch = () => {
const [data, setData] = useState(null);
useEffect(() => {
(async () => {
let response= await fetchData("https://api.coindesk.com/v1/bpi/currentprice.json");
setData(response);
})();
}, []);
return <div>{data}</div>;
};
const fetchData = async (url) => {
const response = await fetch(url);
const json = await response.json();
return json;
};
另一种选择是围绕useEffect创建一个包装函数,为你触发异步函数,类似于:
export function useAsyncEffect(effect: () => Promise<any>) {
useEffect(() => {
effect().catch(e => console.warn("useAsyncEffect error", e));
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.