使用 React useState 获取数据出错答案

【问题标题】：Fetching data with React useState getting wrong使用 React useState 获取数据出错
【发布时间】：2020-09-11 10:06:56
【问题描述】：

我的代码有问题，你能帮帮我吗？我创建了一个 id 状态来从 API 获取一个 id，因为我需要这个 ID 来进行另一个 FETCH

const [id, setId] = useState([])

useEffect(() => {
    async function fetchData() {
      await fetch('https://cors-anywhere.herokuapp.com/https://dashboard.meraki.com/api/v0/organizations', requestOptions)
        .then(response => response.json())
        .then(result =>
          setId(...id, result)
        )
        .catch(error => console.log('error', error))
    }
    fetchData()
  }, [])

所以这里我有一个 ID 数组，我将在下一次提取中使用它们...

const [data, setData] = useState([])
const [isLoading, setIsLoading] = useState(false)

useEffect(() => {
        setIsLoading(true)
        id.map(companyId => {
            async function fetchData() {
                await fetch(`https://cors-anywhere.herokuapp.com/https://dashboard.meraki.com/api/v0/organizations/${companyId.id}/licenses`, requestOptions)
                    .then(response => response.json())
                    .then(result =>
                        setData([...data, { company: companyId.name, results: result}]))
                    .catch(error => console.log('error', error))
            }
            setIsLoading(false)
            fetchData()
        })
    }, [id])

这里的问题是......我为每个 id 获得了一个新的“数据”，所以它会改变每次提取，我知道它是因为我在 useState 的末尾使用了 [id]，但我需要获取 FOR EACH id，一个新的“数据”，这怎么可能？

当我尝试在 useState 结束时使用空数组渲染它时，它只返回一个空数组，因为它只是渲染一次。如何获取第一次提取时在“id”数组中获得的每个 ID，包含第二次提取的所有结果的数据？

PS：requestOptions 由于 API Key 的原因被隐藏了......

【问题讨论】：

这两个钩子是怎么连接的？能否请您提供更多背景信息？
第一个 useEffect 是一个 API 请求，用于获取一个数组，该数组为我提供每家公司的 ID，因为我将需要此 ID 用于第二次获取“/${companyId.id}/licenses”。假设两个钩子都在同一个脚本（App.js）上，在第一个钩子上得到这个“[id]”之后，我需要将它用于第二个钩子，以获取每个 id（公司）的所有数据。我遇到的问题是，每次我在第二个钩子上“setData（）”时，它只会删除我获取的过去数据并给我一个新数据（因为我在 useEffect 结束时使用 [id] . 我想为每个 ID 存储所有 DATA。

标签： javascript reactjs api

【解决方案1】：

如果您想在之前的状态中再添加一个元素，您可以将一个函数传递给setData()，该函数允许您更新旧状态而不是替换它。在您的示例中，我将通过返回一个包含旧状态和新元素的新数组来更改 setData 调用。使用扩展运算符而不是 .push() 方法很重要，这样状态就不会直接改变。 setData(prevState => [...prevState, { company: companyId.name, results: result}])

【讨论】：