React-删除数组的其余部分，而不是只删除一个项

Question

以下是链接：https://codesandbox.io/s/heuristic-heisenberg-9cxb9

我有这个方法：deleteItem

此代码：

return {
monsters: prevState.monsters
.slice(0, deleteItemPosition)
.concat(
prevState.monsters.slice(
deleteItemPosition + 1,
prevState.monsters.length
)
)
};

这是我用来从deleteItemPosition位置的数组中删除项的代码，因为由于不变性，我不能使用monsters.splice(deleteItemPosition, 1)。

那么，为什么我的怪物阵列从deleteItemPosition一直到最后都被切断了呢？自己试试，在"0"中输入一些数字0-5；要删除的索引"；

如果我更新线路

let deleteItemPosition = this.state.deleteItemPosition;

我把它硬编码成，比方说

let deleteItemPosition = 3;

然后我注意到位置3上的项目被删除了，正如我所希望的。

Answer 1

您的deleteItem函数可以像这样简化，还可以确保不会跳过任何状态更新：

deleteItem = () => {
this.setState(prevState => {
return { monsters: prevState.monsters.filter((_, i) => i !== +prevState.deleteItemPosition)};
})
};

建议进行功能更新，因为您的新状态(新怪物阵列(取决于以前的状态。

更新：

您可以使用析构函数来避免一直使用prevState。您需要将deleteItemPosition转换为数字，因为输入的值是一个字符串。

deleteItem = () => {
this.setState(({monsters, deleteItemPosition}) => {
return { monsters: monsters.filter((_, i) => i !== +deleteItemPosition)};
})
};

Answer 2

只需对monsters数组进行浅层复制，应用Array.prototype.splice方法删除项目并返回复制的monsters数组。

const copyMonsters = [...prevState.monsters];
copyMonsters.splice(deleteItemPosition, 1);
return {
monsters: copyMonsters
}

在您的情况下，将此代码放入setState函数中。