我遇到了這個奇怪的錯誤，我仍然無法理解到底發生了什么。
我正在更新一個狀態陣列，并希望將新物件決議到該陣列并保留舊物件。
我使用 ES6 的已知方法是使用擴展運算子：
const [stories, setStories] = useState([]);
...
setStories(stories => [...stories, newStories]);
其中newStories也是一個物件陣列。
但在這里我得到以下輸出：
控制臺日志（故事）
而當我對concat做同樣的事情時：
setStories(stories => stories.concat(newStories));
它按預期回傳：
控制臺日志（故事）
到目前為止，我認為這兩種方法會執行相同的操作。
我還發現了這篇文章，這也證實了我的知識，并且與我得到的上述輸出相矛盾。請參閱：最佳解決方案：Spread operator … & a wrapper
uj5u.com熱心網友回復：
您需要傳播兩個陣列以創建一個新陣列
const story1 = [{a: 1}, {b: 2}]
const story2 = [{c: 3}, {d: 4}]
const newStories = [...story1, ...story2];
console.log(newStories);相反，如果您僅將它用于一個陣列，它將在newArray
const story1 = [{a: 1}, {b: 2}]
const story2 = [{c: 3}, {d: 4}]
const newStories = [story1, ...story2];
console.log(newStories);uj5u.com熱心網友回復：
以檔案中的這段代碼為例：
let parts = ['shoulders', 'knees'];
let lyrics = ['head', ...parts, 'and', 'toes'];
// ["head", "shoulders", "knees", "and", "toes"]
正如您所看到的，通過將陣列傳播parts到lyrics陣列中，它會從陣列中提取資料。如果你改為寫：
let parts = ['shoulders', 'knees'];
let lyrics = ['head', parts, 'and', 'toes'];
// ["head", ["shoulders", "knees"], "and", "toes"]
你會得到陣列。
如果你拿一個陣列
[{name: 'story1'}, {name: 'story2'}]
并將它放在你的另一個陣列中，你會得到：
setStories((stories) => [...stories, newStories]);
[[{name: 'story1'}, {name: 'story2'}]]
如果你再做一次，你會得到：
setStories((stories) => [...stories, newStories]);
[[{name: 'story1'}, {name: 'story2'}],[{name: 'story1'}, {name: 'story2'}]]
因為您只是將陣列放入另一個陣列中。
如果要從陣列中洗掉物件，則必須spread將物件放入您的狀態。
setStories((prevstate) => [...prevstate, ...newStories]);
然后你得到：
[{},{},{},{}]
因為通過傳播，您將物件從它們當前所在的陣列中取出。
作為旁注，我不建議您將回呼函式的引數命名為與您的狀態相同的名稱，這會使您對實際參考的內容感到困惑。我見過prevstate，或者在你的情況下，有些人會寫prevStories等等。只是一個建議。
uj5u.com熱心網友回復：
const a = [{a: 1}, {b: 2}]
const b = [{c: 3}, {d: 4}]
const c = [ ...a, ...b ]
const d = [ a, b ]
const e = [ ...a, b ]
const f = [ a, ...b ]
console.log(c)
console.log(d)
console.log(e)
console.log(f)uj5u.com熱心網友回復：
這很簡單。...展開運算子將一個陣列展開成一個新陣列。但是，您的用法不正確：
setStories(stories => [...stories, newStories]); // ?
setStories(stories => [...stories, ...newStories]); // ?
第一行不起作用的原因是如果newStories是一個陣列（很可能是名稱），...則需要解構并將陣列的所有專案單獨注入新陣列中。
這更清楚地說明了這個錯誤：
const a = [1,2]
const b = [3,4]
const c = [...a, b] // [1,2,[3,4]] ?
const d = [...a, ...b] // [1,2,3,4] ?
...創建新陣列時不使用擴展運算子的唯一情況是添加單個專案時，如下所示：
const a = [1,2]
const b = 5
const c = [...a, ...c] // ?
const d = [...a, b] // ?
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/459915.html