Javascript useState从数组中删除项

我正在尝试从错误中删除一个项，但它没有按预期工作

Im使用状态：

  const [actions, setActions] = useState([
    {
      action: "",
      key: ""
    }
  ]);

我有一个按钮来添加操作：

    <IconButton
      icon="add"
      bgColor="white"
      iconColor="darkGray"
      onClick={() =>
        setActions([
          ...actions,
          {
            action: "",
            key: ""
          }
        ])
      }
    />

设置动作([
…行动，
{
行动：“，
关键字：“
}
])
}
/>

每行都有一个delete，我正在尝试使用行索引删除actions数组中的项：

      <IconButton
        disabled={actions.length === 1}
        icon="dash"
        iconColor="red"
        onClick={() => {
          console.log(index);
          setActions(actions => {
            return [...actions.splice(index, 1)];
          });
        }}
      />

{
控制台日志（索引）；
设置操作（操作=>{
返回[…操作.拼接（索引，1）]；
});
}}
/>

---

尝试使用

过滤器

。它不修改现有阵列，可按如下方式使用：

setActions（prevActions=>(
//筛选出具有匹配索引的项
prevActions.filter（（值，i）=>i！==索引）
));

{
setActions（actions.filter（（item，i）=>i！==index））；
}}
/>

---

我在您的Codesandbox中测试了它，它成功了

修改了原始数组并返回删除的项目。我认为你没有正确的数组方法…这能回答你的问题吗？过滤不是比切片慢吗？因为它必须遍历所有元素并进行比较

==会更好。应该鼓励OP的最佳实践，对吗？；）我认为您对性能的看法是正确的，但我认为
slice
不会返回他们想要的。它返回“提取的”项。@XCS您必须在两个方向上切片。它将是[…actions.slice（0，i），…actions.slice（i+1）]。至于哪一个更快，则取决于编译器。在某一点之后，你就开始发毛了。只要写清楚的东西就行了如果你真的想达到微优化的水平，你可以很容易地在函数
filterations
中声明它，并将它提供给filter。但我真的不认为性能的提高可以证明代码清晰性的损失，它不能正确跟踪删除的内容。所以我把a，b，c放在键输入中，我删除了b，c被删除了。它确实跟踪，检查：，可能你只需要把ActionDropdown和actions状态连接起来，你就可以了。
  <IconButton
    disabled={actions.length === 1}
    icon="dash"
    iconColor="red"
    onClick={() => {
      setActions(actions.filter((item, i) => i !== index));
    }}
  />