大佬教程收集整理的这篇文章主要介绍了如何在 React 中使用 fetch() 在一个函数中组合多个 API 请求，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我必须执行 getDataOne 和 getDataTwo。如何使用 fetch()、useState 和 useEffect 将以下组合成一个函数？
const MyComponent = () => {
const [loading,setLoading] = useState(false);
const [dataOne,setDataOne] = useState<Data[]>([]);
const [dataTwo,setDataTwo] = useState<Data[]>([]);
const getDataOne = async () => {
setLoading(true);
const result = await fetch(
"https://my-API-link-one"
);
const JsonResult = await result.Json();
setLoading(false);
setDataOne(JsonResult);
};
const getDataTwo = async () => {
setLoading(true);
const result = await fetch(
"https://my-API-link-two"
);
const JsonResult = await result.Json();
setLoading(false);
setDataTwo(JsonResult);
};
useEffect(() => {
getDataOne();
getDataTwo();
},[]);
更新：
我使用 Promise.all
const [loading,setLoading] = useState(false);
const [dataOne,setDataOne] = useState<DataOne[]>([]);
const [dataTwo,setDataTwo] = useState<DataTwo[]>([]);
const [data,setData] = useState<DataOne[] & DataTwo>([]);
const urls = [
"https://url-one","https://url-two",];
const getData = async () => {
setLoading(true);
const results = await Promise.all(
urls.map((url) => fetch(url).then((res) => res.Json()))
);
setLoading(false);
setData(results);
console.log(data);
};
这还没有完全奏效。我现在如何正确使用 useState（并处理来自 url 的两个数据）？最后我想要一个 data 变量，以便我可以映射这个变量：
{data.map((item) => {
return (
// etc
您可以使用 Promise.all。在此处阅读更多信息https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all。
const getData = () => {
setLoading(true);
Promise.all([fetch('api-1'),fetch('api-2')]).then(results => {
setDataOne(results[0]);
setDataTwo(results[1]);
}).finally(() => setLoading(false));
}
所以，Promise.all() 接受一个 promise 数组，所以自然而然 Promise.all() 只返回一个数组。因此，即使您的 results 变量仍然是一个数组，我还是建议对其进行解构，因为在这种情况下只涉及两个 API 提取。看看你的更新，我认为只剩下小的修改如下：
const urls = ["https://url-one","https://url-two",];
const getData = async () => {
setLoading(true);
const [result1,result2] = await Promise.all(
urls.map((url) => fetch(url).then((res) => res.json()))
);
setLoading(false);
setDataOne(result1);
setDataTwo(result2);
console.log(data);
};
利用 .flat() 将 Promise.all() 返回的数据数组重新格式化为保存响应对象/数组的状态，
Promise.all(
urls.map(url =>
fetch(url).then(e => e.json())
)
).then(data => {
finalResultState = data.flat();
});
以上是大佬教程为你收集整理的如何在 React 中使用 fetch() 在一个函数中组合多个 API 请求全部内容，希望文章能够帮你解决如何在 React 中使用 fetch() 在一个函数中组合多个 API 请求所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。