从 React 中的状态对象中删除键

作者

在 React 中从状态对象中删除键

Remove a Key from a state Object in React

要从 React 中的状态对象中删除键：

  1. 使用useState钩子来存储状态对象。
  2. 解构对象的键和其余属性。
  3. 将状态设置为其余属性。
应用程序.js
import {useState} from 'react';

export default function App() {
  const initialState = {
    id: 1,
    name: 'Alice',
    salary: 100,
    department: 'development',
  };
  const [employee, setEmployee] = useState(initialState);

  const removeKey = () => {
    setEmployee(current => {
      // 👇️ remove salary key from object
      const {salary, ...rest} = current;

      return rest;
    });
  };

  return (
    <div>
      <button onClick={removeKey}>Click</button>

      <h4>{JSON.stringify(employee, null, 4)}</h4>

      <hr />

      <h2>name: {employee.name}</h2>
      <h2>department: {employee.department}</h2>
      <h2>salary: {employee.salary}</h2>
    </div>
  );
}

从状态对象中删除键

为了从状态对象中删除键，我们解构了键和其余属性，并将状态更新为其余属性。

或者，您可以使用
删除
运算符。

应用程序.js
import {useState} from 'react';

export default function App() {
  const initialState = {
    id: 1,
    name: 'Alice',
    salary: 100,
    department: 'development',
  };
  const [employee, setEmployee] = useState(initialState);

  const removeKey = () => {
    setEmployee(current => {
      // 👇️ create copy of state object
      const copy = {...current};

      // 👇️ remove salary key from object
      delete copy['salary'];

      return copy;
    });
  };

  return (
    <div>
      <button onClick={removeKey}>Click</button>

      <h4>{JSON.stringify(employee, null, 4)}</h4>

      <hr />

      <h2>name: {employee.name}</h2>
      <h2>department: {employee.department}</h2>
      <h2>salary: {employee.salary}</h2>
    </div>
  );
}

如果您决定使用delete运算符，请确保使用扩展语法 (…) 创建状态对象的副本。

我们使用
扩展语法 (…)
将对象的键值对解包为一个新对象，并创建一个浅拷贝。

我们永远不应该改变 React 中的状态对象或数组。

我们将一个函数传递给setState，因为该函数保证以当前（最新）状态调用。

应用程序.js
const removeKey = () => {
  setEmployee(current => {
    // 👇️ create copy of state object
    const copy = {...current};

    // 👇️ remove salary key from object
    delete copy['salary'];

    return copy;
  });
};

当使用前一个状态计算下一个状态时，将一个函数传递给
setState.

否则，如果我们有权访问的状态对象不代表最新值，我们可能会遇到一些奇怪的竞争条件。

–

发表评论