在map react内部的获取请求时返回undefined

Question

我试图从fetch解析中获得一个映射数组，因此对于favoriteCards中的每个元素，它都会返回一个值，并在测试中分配它

useEffect(() => {
const test = favoriteCards.map((card) => {
accuWeatherApi.getCurrentWeather(card.key).then((res) => {
return res;
});
});
setRenderFavorites(test);
}, [favoriteCards]);
console.log(renderFavorites)

无论我做什么，我总是无法定义

Answer 1

getCurrentWeather操作是异步。因此，在这种情况下，您需要await一系列操作来获得它们的结果，然后您可以将这些结果设置为状态值。

在一个可能看起来像这样的useEffect中：

useEffect(() => {
const fetchWeather = async () => {
// begin the asynchronous operations
const promises = favoriteCards.map(card => accuWeatherApi.getCurrentWeather(card.key));
// wait for all of them to complete
const results = await Promise.all(promises);
// update state with the results
setRenderFavorites(results);
}
fetchWeather();
}, [favoriteCards]);

尽管正如你可能想象的那样，有多种方法可以做到这一点。例如，上面的代码立即执行所有异步操作，结果将按照它们完成的顺序排列。如果您需要它们按照相同的顺序，您可以一次await每个操作。例如：

useEffect(() => {
const fetchWeather = async () => {
const results = [];
// await each operations in order
for (const card of favoriteCards) {
results.push(await accuWeatherApi.getCurrentWeather(card.key));
}
// update state with the results
setRenderFavorites(results);
}
fetchWeather();
}, [favoriteCards]);

请注意，在每种情况下，传递给useEffect本身的函数都是而不是async。但是，由于异步操作需要等待，该函数在内部定义了一个为async的函数，然后调用该函数。内部的函数是await操作的地方。

---

顺便说一句，还值得指出的是，您的代码中存在第二个问题。。。使用.map()的语法显式地不返回任何内容。如果在传递给.map()的函数中使用大括号，则没有默认返回，需要显式地为return指定一个值。因此，即使您正在等待操作，或者它们一开始不是异步的，它仍然是undefined，因为没有返回值。