React TypeScript中如何向useState声明的Record类型对应key的列表添加元素

错误原因 #

你定义的Record<string, Person[]>类型要求每个key对应的值是Person类型的数组，但你更新状态时直接给"1"这个key赋值了personList[i]（单个Person对象），类型不匹配所以抛出类型错误。

修复方案 #

更新时要保留原有数组的内容，再把新的Person对象追加到数组末尾，写法如下：

// 基础写法，直接基于现有状态更新
SET_PEOPLE_MAP({
  ...PEOPLE_MAP,
  "1": [...PEOPLE_MAP["1"], personList[i]]
});

更推荐使用函数式更新的写法，可以避免状态异步更新导致的旧值闭包问题：

// 推荐写法，函数式更新更稳妥
SET_PEOPLE_MAP(prev => ({
  ...prev,
  "1": [...prev["1"], personList[i]]
}));

补充说明 #

• 如果后续需要修改其他key对应的列表，逻辑完全一致，替换对应key值和要追加的Person对象即可
• 如果需要清空某个key对应的列表，直接赋值空数组[]即可，符合类型要求

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