React中useState单值状态修改为对象状态及属性更新方法

修改useState声明语句 #

你需要将useState的初始值从字符串替换为对象结构，有两种常用写法：

• 初始化为空对象，适合暂时不需要预设属性默认值的场景

const [selectedGames, setSelectedGames] = useState({});

• 初始化时预置所有属性的默认值，避免后续访问属性时出现undefined报错，更推荐该写法

const [selectedGames, setSelectedGames] = useState({
  name: '',
  date: ''
  // 可根据需求追加其他属性及对应初始值
});

单独修改name属性 #

React状态遵循不可变原则，不能直接修改原状态对象的属性，需要在保留其他属性的基础上覆盖目标字段，更推荐使用函数式更新保证获取到最新的前置状态：

setSelectedGames(prev => ({
  ...prev, // 展开原有所有属性，保留不需要修改的字段
  name: '你需要设置的新name值'
}));

如果能确定更新时不依赖最新的前置状态，也可以直接传入新对象：

setSelectedGames({
  ...selectedGames,
  name: '你需要设置的新name值'
});

禁止直接修改原状态对象（例如selectedGames.name = 'xxx'）后再传入set函数，该写法React无法检测到状态变更，不会触发组件重渲染。

内容的提问来源于stack exchange，提问作者Jon