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

Question

我有一个简单的函数来更新React中的状态。它从URL数组中获取一个简单的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))
}
}; ```

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会触发这个函数它失败了，数据结构似乎不再是阵列

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