React技巧之移除状态对象中的键

React 1年前 154

总览

在React中，移除state对象中的键：

使用useState钩子存储state对象。
解构对象中需要移除的键，以及其他的属性。
将state设置为其他属性。

解构

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

React技巧之移除状态对象中的键

为了移除state对象中的键，我们解构了指定的键以及其余参数，并更新state对象为其余参数。

delete

同样的，你也可以使用delete操作符。

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操作符，请确保使用扩展语法(…)创建一份state对象的副本。我们使用扩展语法来解包对象的键值对到新的对象中，并创建了浅复制。

我们永远不应该在React中改变state对象或数组。

我们将函数传递到setState ，因为函数保证以当前(最新的)状态调用。

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

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

    return copy;
  });
};