react如何修改对象
修改 React 中的对象
在 React 中修改对象时，需要遵循不可变性原则，即不直接修改原对象，而是创建新对象。以下是几种常见方法：
使用扩展运算符（浅拷贝）
const [user, setUser] = useState({ name: 'John', age: 25 });
// 修改单个属性
const updateName = () => {
setUser({ ...user, name: 'Jane' });
};
// 修改多个属性
const updateUser = () => {
setUser({ ...user, name: 'Jane', age: 30 });
};使用 Object.assign
const updateUser = () => {
setUser(Object.assign({}, user, { age: 26 }));
};修改嵌套对象
对于嵌套对象，需要逐层拷贝：
const [data, setData] = useState({
user: { name: 'John', profile: { age: 25 } }
});
const updateNested = () => {
setData({
...data,
user: {
...data.user,
profile: {
...data.user.profile,
age: 26
}
}
});
};使用 Immer 简化不可变更新
安装 Immer 库：
npm install immer使用示例：
import produce from 'immer';
const [user, setUser] = useState({ name: 'John', details: { age: 25 } });
const updateWithImmer = () => {
setUser(produce(user, draft => {
draft.details.age = 30;
draft.name = 'Jane';
}));
};使用函数式更新
当新状态依赖旧状态时：
const incrementAge = () => {
setUser(prevUser => ({
...prevUser,
age: prevUser.age + 1
}));
};注意事项
- 直接修改状态对象会导致组件不更新，因为 React 使用浅比较来检测变化
- 对于深层嵌套对象，考虑使用 Immer 等库来简化更新逻辑
- 数组也是对象，修改数组时同样需要遵循不可变原则
