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

【问题标题】：How to remove specific item from react state如何从反应状态中删除特定项目
【发布时间】：2021-03-15 19:19:32
【问题描述】：

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

当前行为：

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

预期结果：

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

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

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

【问题讨论】：

标签： javascript reactjs react-hooks

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

您可以在handleChange 中进行操作。

删除未选中，即对象中的 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]);

【讨论】：

太棒了！现在工作。我可以用 useEffect 做同样的事情吗？非常感谢！
非常感谢！！
见我上面的编辑。另外，我在这个codesandbox 中添加了一个useEffect 示例。