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

        )

      )

  };

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

那么为什么我的怪物数组从deleteItemPosition到最后都会被切断呢？自己尝试一下，在“要删除的索引”中输入 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您的案例的函数中。