时间戳

首页 > 解决方案 > React：将对象添加到状态数组

javascript - React：将对象添加到状态数组

问题描述

我正在尝试使用 forEach 循环将多个对象添加到状态数组：

const App = () => {
const [pokemon, setPokemon] = useState([]);
axios.get('https://pokeapi.co/api/v2/pokemon') // Gives me 20 pokemon
.then(res => {
  res.data.results.map(p => p.url).forEach(url => { // Loops over endpoints of pokemon
    axios.get(url)
    .then(response => {
      setPokemon(response.data)
    })
  });
})
}

正如您可能猜到的那样，当我 console.log pokemon 时，只显示 forEach 循环中的最后一项，因为它是状态中设置的最后一项。

我正在使用的 api：https ://pokeapi.co/ 。

我首先调用https://pokeapi.co/api/v2/pokemon，它给了我 20 个 pokemon，每个 pokemon 对象都带有一个端点以获取有关它的更多信息，这是我想要存储的来自这些端点的信息作为状态中的对象。

感谢您的帮助，如果您知道更好的方法，请随时告诉我。

标签： javascriptreactjsapiaxios

解决方案

只需创建一个临时数组，将您从 API 获得的所有数据添加到该数组中，然后使用该变量设置状态。您不必每次都设置状态 - 您可以一次设置它。

const App = () => {
  const [pokemon, setPokemon] = useState([]);
  const tempArr = [];
  axios.get('https://pokeapi.co/api/v2/pokemon') // Gives me 20 pokemon
  .then(res => {
    res.data.results.map(p => p.url).forEach(url => { // Loops over endpoints of pokemon
      axios.get(url).then(response => {
        tempArr.push(response.data);
      })
    });
  });
  setPokemon(tempArr);
}

推荐阅读