阵列数据不可映射，即使控制台显示数据

Question

我有一个小问题，我似乎无法解决。我正在从 Pokeapi 获取数据以取回一些小精灵，然后遍历该数据以触发另一个获取请求以带回给定小精灵的关联数据。

我想将此数据推送到一个数组，以便我可以在应用程序加载时触发此请求并将数据保存到存储中，这样就不必发出新的请求。但是...（顺便说一句，我还没有这样做）

我 console.log 结果和数据都在那里，但是当试图将数据映射出来时，nada。

请看下面我的尝试：

export function SomeComponent() {
  let arr = [];


  async function fetchPokemon() {
  const pokemon = await fetch('https://pokeapi.co/api/v2/pokemon?limit=10')
   .then(response => response.json())
  for await (const x of pokemon.results.map(async (result) => await fetch(result.url)
  .then(response => response.json()))) {
    arr.push(x);
    }
  }

  fetchPokemon();
  console.log(arr)

return (
  <>
    {arr.map((pokemon) => (
       <p>
         {pokemon.name} 
       </p>
    ))}
  </>
 )
}

我最好的猜测是控制台正在显示实时结果并且它们的数据还没有实际填充？

我希望看到

标签中显示的神奇宝贝名称。

Answer 1

在 React 中，我们应该使用 state 来存储数据，并使用 Effect 来执行副作用操作，例如获取数据：

export function SomeComponent() {
  const [arr, setArray] = useState([]);


  async function fetchPokemon() {
  const pokemon = await fetch('https://pokeapi.co/api/v2/pokemon?limit=10')
   .then(response => response.json())
  for await (const x of pokemon.results.map(async (result) => await fetch(result.url)
  .then(response => response.json()))) {
    setArray([...arr, x]);
    }
  }
useEffect(() => {fetchPokemon()}, []}

return (
  <>
    {arr.map((pokemon) => (
       <p>
         {pokemon.name} 
       </p>
    ))}
  </>
 )
}

阵列数据不可映射，即使控制台显示数据

Array data not mappable even though console shows data

javascript

arrays

asynchronous

object

reactjs