react如何给对象添加值
在 React 中给对象添加值
React 中操作对象时需要注意状态更新的不可变性原则，即不能直接修改原对象，而是创建新对象。以下是几种常见方法：
使用扩展运算符（推荐）
通过扩展运算符复制原对象，并添加新属性：
const [user, setUser] = useState({ name: 'Alice', age: 25 });
// 添加新属性
const updatedUser = { ...user, gender: 'female' };
setUser(updatedUser);使用 Object.assign
Object.assign 也可以实现类似效果：
const updatedUser = Object.assign({}, user, { gender: 'female' });
setUser(updatedUser);动态添加属性
当属性名需要动态生成时：
const propertyName = 'email';
const propertyValue = 'alice@example.com';
setUser(prev => ({
...prev,
[propertyName]: propertyValue
}));嵌套对象更新
对于嵌套对象需要逐层展开：
const [data, setData] = useState({
user: {
name: 'Bob',
profile: { age: 30 }
}
});
setData(prev => ({
...prev,
user: {
...prev.user,
profile: {
...prev.user.profile,
gender: 'male'
}
}
}));使用 Immer 简化复杂更新
对于复杂对象结构，推荐使用 Immer 库：
import produce from 'immer';
setData(produce(draft => {
draft.user.profile.gender = 'male';
}));注意事项
- 直接修改状态对象会导致组件不更新
- 每次更新都应该返回新对象
- 深度嵌套对象建议使用工具库如 Immer 处理
