为什么 spread 运算符不向我的数组添加属性？

Question

我正在使用一个React useState变量。我有一个对象数组，在顶层有18个对象。我试图在第14个索引更新对象，然后在它之后返回剩余的对象。起初我直接变异状态将改变它一样:

setFormWizard(wizard => {
wizard.controls[14].trash = true;
return ({
...wizard,
wizard: wizard.controls[14].group.push(...newSection.slice(0, 5)),
});
});

这是有效的，但我被告知这不是一个好的做法，因为在某些情况下，如果你直接推送到状态，React可能无法捕获更新。所以现在我试着用扩展运算符来代替

发生的是前14个对象返回。我修改的对象返回了，但是在第14个下标之后的其他对象没有返回。我做错了什么?

setFormWizard(wizard => {
const subjectControls = wizard.controls[14]
const groups = [...controls.group, ...subjectAddressCopy.slice(0, 5)]
return ({
...wizard,
controls: [
...wizard.controls.splice(0,14), // keep first 14 entries 
{
...subjectControls,
group: groups,
trash: true
} // modify the 15th entry
...wizard.controls.splice(15) // this doesn't return the remaining controls
],
});
});

Answer 1

bczsplice在实际数组的变化，你需要使用slice

const arr = [1, 2, 3, 4]
arr.splice(0,2)
console.log('splice change in array so actual value of arr is :', arr)
const arr1 = [1,2,3,4,5]
// it will take slice(start, end) but end not included in return value
const cutSection = arr1.slice(1, 3);
console.log('portion of array', cutSection)

Answer 2

您可能希望使用slice返回从索引15开始的所有内容。