Question

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

{
"Entity":"MP3",
"Body":"{"name":"COKE","category":"CANDIES","sales":123.0}"
}

Answer 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])

Answer 2

你需要给出之前的状态：

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

或者也有这个解决方案：

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

Answer 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);
}

Answer 4

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

{{1}}

带有循环的 REACT 状态更新覆盖以前的值

4 个答案: