React useState 如何更新嵌套对象？

Question

仓乃文 · Accepted Answer

React 不允许直接修改 state，需要通过 setState 创建新对象。对于嵌套对象，需要展开所有层级或使用 immer 简化。

手动展开（传统方式）：
```javascript
const [user, setUser] = useState({
  profile: {
    name: "张三",
    address: { city: "北京", street: "朝阳区" }
  }
});

setUser(prev => ({
  ...prev,
  profile: {
    ...prev.profile,
    address: { ...prev.profile.address, city: "上海" }
  }
}));
```

使用 immer（推荐，更简洁）：
```javascript
import { useImmer } from "use-immer";

const [user, updateUser] = useImmer({
  profile: { name: "张三", address: { city: "北京", street: "朝阳区" } }
});

// 可以直接修改，immer 自动创建不可变副本
updateUser(draft => {
  draft.profile.address.city = "上海";
});
```

补充说明：
- React 要求不可变更新，直接修改不会触发渲染
- 嵌套越深展开越繁琐，immer 可以大大简化代码
- use-immer 是最流行的 immer 与 React hooks 集成方案
- 状态层级过深是代码坏味道，考虑是否需要扁平化结构