迹忆客 专注技术分享

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

1. 使用 useState 挂钩来存储状态对象。
2. 解构对象的键和其余属性。
3. 将状态设置为其余属性。

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>
  );
}

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

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

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>
  );
}

如果我们决定使用删除运算符，请确保使用扩展语法 ... 创建状态对象的副本。

我们使用扩展语法 ... 将对象的键值对解包到一个新对象中并创建一个浅拷贝。

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

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

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

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

    return copy;
  });
};

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

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