React - 删除数组的其余部分而不是仅删除一项答案

【问题标题】：React - Deleting rest of the array instead of just one itemReact - 删除数组的其余部分而不是仅删除一项
【发布时间】：2020-12-24 23:05:43
【问题描述】：

这是链接： 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 上的项目被删除了，正如我所愿。

【问题讨论】：

在不改变的情况下删除一个项目在 ES6 中应该有点简单，使用 delete prevState.monsters[deleteItemPosition]; return {...prevState};，这就是 setState 回调中所需要的全部
是的，谢谢。这是最好的做法吗？
为什么不呢，你没有改变状态并提供一个新的副本作为回报，它对我来说一直很好
我开枪了..它不起作用。删除位置 2 上的项目后，就无法再次删除位置 2 上的项目，数组不会刷新。
唯一的原因可能是使用数组索引作为键

标签： javascript reactjs

【解决方案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)};
    })
  };

【讨论】：

谢谢，它工作得很好，它更新了原始数组及其索引，就像它应该做的那样。这是在 React 中从数组中删除项目的最佳编码实践吗？
@Dalibor 是的，绝对是最好的。我会和任何不同意的人争论:)
谢谢。我知道编写单行代码比编写“常规”代码更难，但我宁愿给 Sajeeb 一个选定的答案，因为他的解决方案更具可读性。
不如“+prevState.deleteItemPosition”我使用“+deleteItemPosition”。为什么加号？ deleteItemPosition 什么时候从数字变成了字符串？
谢谢。我的意思是这个，没有解构（请参阅我更新的 Codesandbox 以了解我的意思并查看它是否正常工作） this.setState(prevState => {return { monsters: prevState.monsters.filter((_, i) = > i !== +deleteItemPosition) }}

【解决方案2】：

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

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

return {
  monsters: copyMonsters
}

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

【讨论】：

谢谢，它工作得很好，它更新了原始数组及其索引，就像它应该做的那样。这是在 React 中从数组中删除项目的最佳编码实践吗？