Question

我正在尝试从我的反应状态中删除特定项目。

当前行为：

当某些复选框被选中时，我正在更新它们的状态。我的 useEffect 有他的依赖项的复选框状态，每次更改我只为选定的复选框添加内容。

预期结果：

当我取消选中某个复选框时，我想从“状态”状态中删除特定键。

以代码沙盒为例： https://codesandbox.io/s/priceless-rgb-bon2f?file=/src/App.js

我怎样才能删除它？谢谢。

Answer 1

您可以在 handleChange 中完成。

Remove 未选中，即对象中的 false 属性名称。或者……
添加，即对象中的 true 属性名称

const handleChange = (event) => {
  const { name, checked } = event.target;

  setState((prev) => {
    if (checked) {
      return { ...prev, [name]: `new value of ${name}` }; // Adding a new property
    }
    const { [name]: namesValue, ...rest } = prev; // Removing an old property
    return rest;
  });

};

说明：

要添加新属性，请使用扩展运算符创建一个新对象并添加新属性和新值：

{ ...prev, [name]: `new value of ${name}` }

要删除旧属性，丢弃一个使用计算对象属性名称并继续解构：

const { [name]: namesValue, ...rest } = prev;

演示：

function App() {
  const [state, setState] = React.useState({
    a: "initial value of a",
    b: "initial value of b"
  })
  const [checked, setChecked] = React.useState({
    a: true,
    b: true,
  })

  const handleChange = (event) => {
    const { name, checked } = event.target

    setState((prev) => {
      if (checked) {
        return { ...prev, [name]: `new value of ${name}` }
      }
      const { [name]: namesValue, ...rest } = prev
      return rest
    })

    setChecked((prev) => ({ ...prev, [name]: checked }))
  }

  return (
    <div className="App">
      <label htmlFor="a">a</label>
      <input
        name="a"
        checked={checked.a}
        type="checkbox"
        id="a"
        onChange={handleChange}
      />

      <label htmlFor="b">b</label>
      <input
        name="b"
        checked={checked.b}
        type="checkbox"
        id="b"
        onChange={handleChange}
      />

      <div>{JSON.stringify(state)}</div>
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))

<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<body>
<div id="root"></div>
</body>

编辑：

如果你想有一个单独的 useEffect 钩子来管理属性的添加/删除，你可以使用 reduce 如下：

useEffect(() => {
  setState((prev) => {
    return Object.keys(checked).reduce((obj, key) => {
      if (checked[key]) {
        obj[key] = prev[key] ?? `new value of ${key}`;
      }
      return obj;
    }, {});
  });
}, [checked]);

Answer 2

您可以创建一个新对象并将其设置为该新对象。像这样。

const newObject = Object.keys(state).reduce((object, item) => {
      if (item !== key) {
        object[item] = state[item];
      }
      return object;
    }, {});

如何从反应状态中删除特定项目

2 个答案:

说明：

演示：

编辑：