javascript - 使用 "nested"获取设置钩子(Hook)时，React、Axios、PokeAPI 返回未定义

Question

我尝试做一个小项目，制作一个迷你 Pokedex，以更加熟悉 hooks 和 Axios。我正在尝试传递 PokeAPI 给出的 Pokemon 的 URL，以便让 Pokemon 对象数组显示其所有信息。这是我现在的代码，但它返回一个包含 20 个“未定义”元素的数组。

const [pokemon, setPokemone] = useState([]);

axios.get('https://pokeapi.co/api/v2/pokemon/')
  .then(res => {
    setPokemon(res.data.results.map(p => {
      axios.get(p.url)
        .then(res => res.data);
    }));
  });

我能做什么，或者我做错了什么？如果我console.log“res.data”，它会打印所有对象，但由于某种原因，该信息未设置。

预先感谢您的任何帮助/建议。

Answer 1

map 函数返回一个新值数组，您的函数不返回任何内容(您实现的回调函数包装在 {} 中，没有 return) 所以它默认为 undefined

您应该首先获取神奇宝贝列表，然后获取每个神奇宝贝的详细信息，然后在完成后绘制 map 并设置值

axios
  .get("https://pokeapi.co/api/v2/pokemon/")
  .then((res) => {
    return res.data.results
  })
  .then((results) => {
    return Promise.all(results.map((res) => axios.get(res.url)))
  })
  .then((results) => {
    setPokemon(results.map((res) => res.data))
  })

下面的 Codesandbox 演示