为什么在通用类型与数组类型相同的useState中不能使用数组

Question

我已经定义了一种数据类型

interface IOptions {
  name: string
  value: any
  type: string
}

并创建了该类型的数组

let myTableData: IOptions[] = [
    {name: "A string", value: "string to display", type: "string"},
    {name: "A number", value: 42, type: "number"},
    {name: "A combobox Enum style", value: "1", type: "enum"},
    {name: "A bool flag", value: true, type: "bool"},
];

现在我想定义一个使用此数据类型并被输入的状态

let [state, setState] = React.useState<IOptions[]>({
  myTableData
});

但这给我错误信息

类型'{myTableData：IOptions [];的参数 }'不可分配给'IOptions [] |类型的参数。 （（）=> IOptions []）'。 对象文字只能指定已知的属性，而'myTableData'在'IOptions [] |类型中不存在。 （（）=> IOptions []）'。ts（2345）

这是为什么？ 我怎样才能解决这个问题？

Answer 1

useState<{myTableData: IOptions[]}>({myTableData});

您告诉打字稿状态是IOptions的数组，然后为其提供一个对象，请告诉我这是否有帮助

Answer 2

您将类型定义为IOptions的数组，而将状态设置为键为myTableData的对象

您可以选择仅将数组置于如下状态

let [state, setState] = React.useState<IOptions[]>(myTableData);

或将类型更改为对象

interface DataObj = {
    myTableData: IOptions[]
}
let [state, setState] = React.useState<DataObj>({
    myTableData
});