当前位置：首页 > React

react如何修改对象中的值

2026-01-26 05:02:43React

修改 React 对象中的值

在 React 中修改对象中的值需要遵循不可变性原则，即不能直接修改原对象，而是创建新对象。以下是几种常见方法：

使用展开运算符

通过展开运算符复制原对象，并覆盖需要修改的属性：

const [state, setState] = useState({ name: 'John', age: 25 });

const updateAge = () => {
  setState({
    ...state,
    age: 30
  });
};

使用 Object.assign

Object.assign 也可以用于创建新对象：

const updateAge = () => {
  setState(Object.assign({}, state, { age: 30 }));
};

嵌套对象修改

对于嵌套对象，需要逐层展开：

const [user, setUser] = useState({
  name: 'John',
  profile: {
    age: 25,
    job: 'developer'
  }
});

const updateProfile = () => {
  setUser({
    ...user,
    profile: {
      ...user.profile,
      age: 30
    }
  });
};

使用 Immer 库

Immer 可以简化不可变更新：

import produce from 'immer';

const updateAge = () => {
  setUser(produce(user, draft => {
    draft.profile.age = 30;
  }));
};

数组中的对象修改

修改数组中的特定对象：

react如何修改对象中的值

const [items, setItems] = useState([
  { id: 1, value: 'A' },
  { id: 2, value: 'B' }
]);

const updateItem = (id, newValue) => {
  setItems(items.map(item => 
    item.id === id ? { ...item, value: newValue } : item
  ));
};

这些方法都遵循 React 的不可变更新原则，确保组件能正确检测到状态变化并重新渲染。