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您的案例的函数中。