时间戳

首页 > 解决方案 > React 状态返回一个函数数组

javascript - React 状态返回一个函数数组

问题描述

我正在构建一个使用 API 的应用程序，我正在调用 151 个 API 调用，然后希望将每个结果作为对象返回到我的状态数组。

代码如下，当我记录结果时，我得到一个“newPokemon”回调函数数组，而不是数据。

const fetchPokemon = useCallback(async () => {
    setLoading(true)
    try {
      for (let i = 0; i < numbers.length; i++) {
        const response = await fetch(`${url}${numbers[i]}`)
        const data = await response.json()
        const newPokemon = () => {
          const {
            name,
            order,
            height,
          } = data
          return {
            name,
            order,
            height,
          }
        }
        setPokemon((prevState) => [...prevState, newPokemon])
      }
    } catch (error) {
      console.log(error)
      setLoading(false)
    }
  }, [])

有人可以帮忙吗？如果我在 API 调用下面调用 setPokemon 并且数据有效，但在每次迭代时都会被覆盖，因此状态将永远是循环结束时的一个对象，而不是完整的数据集。到目前为止，我尝试了多种设置状态的语法无济于事

setPokemon(newPokemon)

先感谢您

标签： javascriptreactjsstate

解决方案

您声明了一个名为的新函数newPokemon，然后将其插入到状态中，这就是您在状态中获得函数数组的原因。您需要插入函数执行结果： setPokemon((prevState) => [...prevState, newPokemon()])

推荐阅读