deleting keys from state object in react-ag捕鱼王app官网

current location：home > learning > web front-end > react >

vue react javascript css

deleting keys from state object in react

author：jiyik last updated：2025/03/10 views：

to remove a key from a react state object:

use usestatethe hook to store state objects.
destructure the keys and remaining properties of an object.
set the state to the remaining properties.

import {usestate} from 'react';

export default functionapp() {
  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><buttononclick={removekey}>clickbutton><h4>{json.stringify(employee, null, 4)}h4><hr /><h2>name: {employee.name}h2><h2>department: {employee.department}h2><h2>salary: {employee.salary}h2>div>
  );
}

to remove a key from the state object, we deconstruct the key and the remaining properties and update the state with the remaining properties.

alternatively, we can use the delete operator.

import {usestate} from 'react';

export default functionapp() {
  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><buttononclick={removekey}>clickbutton><h4>{json.stringify(employee, null, 4)}h4><hr /><h2>name: {employee.name}h2><h2>department: {employee.department}h2><h2>salary: {employee.salary}h2>div>
  );
}

if we decide to use the delete operator, make sure ...to create a copy of the state object using the spread syntax.

we use spread syntax ...to unpack the object's key-value pairs into a new object and create a shallow copy.

we should not mutate state objects or arrays in react.

we setstatepass a function to , because that function is guaranteed to be called with the current (latest) state.

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

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

    return copy;
  });
};

a function is passed to when calculating the next state using the previous state setstate.

otherwise, we could run into some weird race conditions if the state object we have access to doesn't represent the latest value.

next: none

for reprinting, please send an email to 1244347461@qq.com for approval. after obtaining the author's consent, kindly include the source as a link.

article url：

publish date：2025/03/09 views：170 category：react

要在 react 状态下替换数组中的对象：使用 map() 方法遍历数组。在每次迭代中，检查是否满足某个条件。替换满足条件的对象并按原样返回所有其他对象。

how to call a function only once in react

publish date：2025/03/09 views：127 category：react

使用 useeffect 钩子在 react 中只调用一次函数。当 useeffect 钩子传递一个空的依赖数组时，它仅在组件挂载时运行。当我们必须在组件安装时获取数据时，这是首选方法。

run react hooks when a component unmounts

publish date：2025/03/09 views：81 category：react

卸载组件时，使用 useeffect 钩子运行react钩子。我们从 useeffect 钩子返回的函数在组件卸载时被调用，可用于清理目的。

publish date：2025/03/09 views：181 category：react

在 react 中使用带有索引的 map() 方法：在数组上调用 map() 方法。传递给 map() 方法的函数会被元素和索引调用。

deleting keys from state object in react-ag捕鱼王app官网