如何使用 React 打字稿中的 useState Record 类型将元素添加到具有键值的列表中？答案

【问题标题】：How can I add an element to a list with a key value using a useState Record type in React typescript?如何使用 React 打字稿中的 useState Record 类型将元素添加到具有键值的列表中？
【发布时间】：2021-12-19 21:09:24
【问题描述】：

我的 Record 类型的结构如下所示：

const PEOPLE_MAP_INIT: Record<string, Person[]> = {
        "1": [],
        "2": [],
        "3": []
    };

useState 是这样初始化的：

const [PEOPLE_MAP, SET_PEOPLE_MAP] = useState<Record<string, Person[]>>(PEOPLE_MAP_INIT);

基本上，我试图保存与字符串键值相对应的“人员对象”列表，每个对象都将保存自己的唯一列表。

我正在尝试从给定的 Person 对象主列表中将 Person 对象添加到 PEOPLE_MAP 中的第一个列表：

SET_PEOPLE_MAP({...PEOPLE_MAP, ["1"]: personList[i]});

但是，这只会给我类型错误。我知道在某处我误解了 Record 类型的使用，但我只是不确定如何解决这个问题。

【问题讨论】：

标签： reactjs typescript object record use-state

【解决方案1】：

我这样写了 AddPerson 函数，它工作正常，没有任何错误类型

const addPerson = () => {

  const newPerson = new Person('Joe', 30);

  const newPeopleMap = {...peopleMap};

  newPeopleMap["1"].push(newPerson);

  setPeopleMap(newPeopleMap);   
};

完整的代码在这里 -> https://codesandbox.io/s/practical-wind-8spnv

【讨论】：

非常感谢您的回答，我认为这里的重点是创建 newPeopleMap，因为我尝试了 .push 但在原始 peopleMap 上并没有正确更新。再次感谢您的回答！