0

这是链接： 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-5

如果我更新线路

let deleteItemPosition = this.state.deleteItemPosition;

我把它硬编码成，比如说

let deleteItemPosition = 3;

然后我注意到位置 3 上的项目被删除了，正如我想要的那样。

4

2 回答 2

1

只需制作monsters数组的浅表副本，应用Array.prototype.splice删除项目的方法并返回复制的monsters数组。

const copyMonsters = [...prevState.monsters];
copyMonsters.splice(deleteItemPosition, 1);

return {
  monsters: copyMonsters
}

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

于 2020-12-24T13:51:12.940 回答
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)};
    })
  };
于 2020-12-24T13:59:38.687 回答