Обычно мы работаем с React и извлекаем, чтобы получать ответы и создавать с их помощью состояния. Но что произойдет, если нам нужно удалить ключ из состояния, чтобы отправить обновленный объект на сервер?
Давайте узнаем, как мы можем этого добиться.

Мы можем удалить ключ из объекта состояния в React, следуя этому шаблону:

  1. Сохраните объект состояния с помощью хука useState.
  2. Деструктурировать ключ объекта и остальные свойства.
  3. Установите состояние для остальных свойств.
import {useState} from 'react';
export default function App() {
  const initialState = {
    id: 1,
    name: 'Luca',
    cost: 5000,
    area: 'business',
  };
  const [employee, setEmployee] = useState(initialState);
const removeKey = () => {
    setEmployee(current => {
      // remove cost key from object
      const {cost, ...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>Area: {employee.area}</h2>
      <h2>Cost: {employee.cost}</h2>
    </div>
  );
}

Чтобы удалить ключ из объекта состояния, мы деструктурировали ключ и остальные свойства и обновили состояние до остальных свойств {…остальные}. Таким образом, мы можем легко удалить ненужные ключи из нашего объекта состояния.