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
});

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

2 个答案: