如何确保API数据被调用并使用.then添加

Question

我正在useEffect中获取数据，并在其中循环以添加其他数据。

我想在所有数据添加到results后对它进行一些计算，我在if (response.data.next)内进行计算，但在then内进行计算后，当我尝试访问数据时，它会打印旧数据。

如何确保添加的所有数据都能在then中使用？

const [results, setResults] = useState([]);
useEffect(() => {
async function handleAPIRequest(url) {
return await axios
.get(url)
.then(async (response) => {
await setResults((results) => [...results, ...response.data.results]);
if (response.data.next) {
await handleAPIRequest(response.data.next);
}
return results;
})
.then(async () => {
// this is where I want to use results
console.log("resultss: ", results);
});
}
handleAPIRequest(url)
}, []);

Answer 1

我建议保持异步/等待或链接承诺之间的一致性。你的方法可能会导致多个setResults，不确定这是否是你想要的。下面，我提供了一个可能适合您需求的解决方案：

useEffect(() => {
async function handleAPIRequest(url, currentResults = []) {
try {
const response = await axios.get(url)
const nextResults = [...currentResults, ...response.data.results];
if (response.data.next) {
return await handleAPIRequest(response.data.next, nextResults);
}
return nextResults;
} catch (error) {
throw error;
}
}
try {
const finalResults = await handleAPIRequest(url);
setResults(results => [...results, ...finalResults]);      
} catch (error) {
// here you can handle error response
console.log(error);
}
}, []);
// to do something after results state is updated use another use effect to accomplish that
useEffect(() => {
// do something on updated results state
}, [JSON.stringify(results)]);

Answer 2

您应该以以下方式更改代码：

const [results, setResults] = useState([]);
useEffect(() => {
const handleAPIRequest = async url => {
const lastResult = await axios.get(url);
setResults([...results, ...lastResult.data.results]);
const toLogResults =  [...results, ...lastResult.data.results];
if(response.data.next) {
await handleAPIRequest(response.data.next);
} else {
console.log("The final results are", toLogResults);
}
}
handleAPIRequest(url)
}, []);

主要问题是setResults()之后的行中的results没有立即更新，因此该值是旧值。

toLogResults只是用来显示实际结果，不需要它。