useState 從數組中刪除項目

Question

我正在嘗試從錯誤中刪除一個項目，但它沒有按預期工作。

我使用狀態：

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

我有一個按鈕來添加操作：

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

每行都有一個刪除，我正在嘗試使用行索引刪除操作數組中的項目：

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

https://codesandbox.io/s/actions-selector-n9xb4

Answer 1

嘗試使用filter 。 它不會修改現有數組，可以像這樣使用：

setActions(prevActions => (
  // Filter out the item with the matching index
  prevActions.filter((value, i) => i !== index)
));

Answer 2

  <IconButton
    disabled={actions.length === 1}
    icon="dash"
    iconColor="red"
    onClick={() => {
      setActions(actions.filter((item, i) => i !== index));
    }}
  />

我在你的 Codesandbox 中測試了它並且它有效