如何在 Typescript 中将具有动态键的对象设置为 React 状态

Posted 2023-02-22

【中文标题】如何在 Typescript 中将具有动态键的对象设置为 React 状态

【英文标题】：How to set an an object with a dynamic key as React state in Typescript

【发布时间】：2020-05-06 14:52:02

【问题描述】：

我正在使用 React 和 Typescript，需要使用具有两个预定义属性的动态键创建一个对象。该字段是动态的，因此我无法在 Typescript 中预先定义它。我试图在接口中实现的结构是：

[field: string]: 
   property1: string,
   property2: string

然后我希望能够动态设置这个对象的键。比如，

let item: string = "randomTest"

 this.setState(
    [item].property1: "test value 1"
 )

并通过以下方式访问它：

this.state[item].property1

但是，当我尝试在 Typescript 接口中实现此结构时，不在动态对象中的状态键会抛出错误，指出它们“不可分配给字符串索引类型'property1: string'。例如，下面的testKey1会抛出这个错误：

[field: string]: 
   property1: string,
   property2: string
;
testKey1: string;

这个错误似乎是说 testKey1 在 [field] 对象中，即使它不在。

如何在 Typescript 中有效地将具有动态键的对象定义为 React 状态？

【问题讨论】：

对象中的两个键都是property2，是错字吗？

是的。我刚刚改了

动态键是什么意思。你的意思是什么对象可以接受每个字符串作为键。还是接受来自特定字符串集的任何键的对象？请多解释一下。

我觉得如果你举个例子说明你想用真实的例子实现什么会更容易理解

我添加了一个我正在尝试完成的示例。基本上，我希望能够动态设置对象的键。

【参考方案1】：

在testKey1之前添加一个semecon：字符串；

【参考方案2】：

您可以使用 TypeScript 2.1 中添加的 Record 内置类型。记录

interface MyObject 
  property1: string;
  property2: string;


type DynamicObject = Record<string, MyObject>;

【讨论】：

我尝试将接口定义为动态键的值，但这不起作用。

例如 [field: string]: MyObject throws and error。

【参考方案3】：

替换

[field: string]: 
   property1: string,
   property2: string

由

    interface Anything 
      [key: string]: any;
    

当你打电话时：这样做

let item =  property1: "randomTest", property2: "randomTest1", property3: "randomTest3"

 this.setState(
    [item].property1: "test value 1"
 )