使用循环的 REACT 状态更新会覆盖以前的值答案

【问题标题】：REACT state update with loop overrides previous values使用循环的 REACT 状态更新会覆盖以前的值
【发布时间】：2021-04-06 18:56:09
【问题描述】：

我有一个简单的函数来更新 React 中的状态。它从 URLs 数组中获取一个简单的 URL，然后获取其他数据并创建 newItem 它应该用这个新对象更新另一个也是数组的状态。但它会相互覆盖第一项。为什么会这样？

for (const item of urls) {
  const url = item.url
  const ID = url.slice((url.search("=",0) + 1), url.length)
  const YtResponse = GetByIdYouTube(ID)
  const data = await YtResponse
  const date = item.date
  const newItem = {data, url, date}
  setDisplay(display.concat(newItem))
}

}; ```

【问题讨论】：

标签： javascript reactjs for-loop state

【解决方案1】：

SetDisplay 是一个异步函数。尝试在 for 循环之外调用它。在迭代时创建一个单独的数组，并在 for 循环之后将该数组附加到先前维护的 display 状态。

separateArray = []
for (const item of urls) {
  const url = item.url
  const ID = url.slice((url.search("=",0) + 1), url.length)
  const YtResponse = GetByIdYouTube(ID)
  const data = await YtResponse
  const date = item.date
  const newItem = {data, url, date}
  separateArray.push(newItem)
}    

setDisplay([...display, ...separateArray])

【讨论】：

谢谢，我尝试了这个解决方案，但是在上面的那个表单中，它无法访问单独的数组，所以我在循环中添加了一个 return 语句，但它什么也没做 :)跨度>

【解决方案2】：

你需要给出之前的状态：

setDisplay({ (display) => { display.concat(newItem) }})

或者也有这个解决方案：

const t = display.concat(newItem)
setDisplay(t)

【讨论】：

谢谢，但它仍然做同样的事情:)

【解决方案3】：

这应该可以正常工作

for (const item of urls) {
      const url = item.url;
      const ID = url.slice(url.search("=", 0) + 1, url.length);
      const YtResponse = GetByIdYouTube(ID);
      const data = await YtResponse;
      const date = item.date;
      const newItem = { data, url, date };
      let temp = [...display]; // Make a copy of array then update state
      temp.push(newItem);
      setDisplay(temp);
}

【讨论】：

谢谢，但它仍然做同样的事情

【解决方案4】：

我找到了一半的解决方案:) 这个函数应该能够添加一个或多个值。现在使用下面的代码，它可以从初始状态（URL 状态）一次读取多个值但是当我通过添加一个值来更新 Urls 状态并且 useEffect 触发这个函数时它的失败似乎数据结构不再是数组了


   const newArr = []
  for (const item of urls) {
    const url = item.url;
    const ID = url.slice(url.search("=", 0) + 1, url.length);
    const YtResponse = GetByIdYouTube(ID);
    const data = await YtResponse;
    const date = item.date;
    const newItem = { data, url, date };
    newArr.push(newItem)
}
  setDisplay(...display, newArr) 

 };```

【讨论】：