如何在React.useState中使用Mapped Types映射类型？

你当前的写法错误在于把对象当成数组使用扩展语法，同时直接修改了原state对象，违反了React的不可变更新规则。以下是两种正确的实现方式：

方式一：对象展开运算符（推荐） #

利用函数式更新获取最新的state，通过对象展开复制原有属性，再添加新的键值对：

React.useEffect(() => {
  setMap(prevMap => ({
    ...prevMap,
    [id_scde]: scde
  }));
}, []);

方式二：Object.assign #

通过Object.assign创建新对象，合并原有属性和新键值对：

React.useEffect(() => {
  setMap(prevMap => Object.assign({}, prevMap, { [id_scde]: scde }));
}, []);

错误原因说明 #

• [...map]是数组的扩展语法，而你的map是对象类型（MapType是带数字索引的对象），不能用数组扩展来处理，这会直接导致语法错误。
• map[id_scde] = scde直接修改了原state对象，React依赖state的引用变化来触发重新渲染，直接修改原对象不会触发更新，同时也不符合React的不可变数据规范。

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