我尝试创建一个从服务器获取数据的函数,并且它有效。
但我不确定这是否正确?
我创建了一个函数组件来获取数据,使用useState, 使用效果 and 异步/等待 :
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
我不确定是一个地方where to call the 获取数据功能。我在 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>;
};
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)