如何從反應 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