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

Question

我的 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]});

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

Answer 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

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

How can I add an element to a list with a key value using a useState Record type in React typescript?

reactjs

typescript

object

record

use-state