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

Question

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

当前行为：

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

预期结果：

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

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

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

Answer 1

您可以在handleChange中进行。

从 object 中删除未经检查的即false属性名称。 或者...
在 object 中添加检查的即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;
  });

};

解释：

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

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

要删除旧属性，请在解构中使用计算的 object 属性名称和 rest丢弃一个：

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

您可以制作一个新的 object 并将其设置为新的 object。 像这样。

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

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

问题描述

2 个解决方案

解决方案1
1 2021-03-15 20:01:13

解释：

演示：

编辑：

解决方案2
1 2021-03-15 20:18:16

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

问题描述

2 个解决方案

解决方案1 1 2021-03-15 20:01:13

解释：

演示：

编辑：

解决方案2 1 2021-03-15 20:18:16

解决方案1
1 2021-03-15 20:01:13

解决方案2
1 2021-03-15 20:18:16