Reactjs 使用字符串动态地反应setState

如何在React组件中动态设置和现有状态字段

我当前的尝试导致以下方法，但在TypeScript中不起作用：

export interface MaskCompanyDetailState {
    fieldId: number;
}

export class MaskCompanyDetail extends React.Component<MaskCompanyDetailProps, MaskCompanyDetailState> {

    public constructor(props: any) {
        super(props);

        // Set field defaults.
        this.state = {
            fieldId: 0,
        };
    }

    public componentDidMount() {
        const myField: string = 'fieldId';
        const myVal: number = 123;
        this.setState({[myField]: myVal});
        this.setState({myField: myVal});
    }
}

导出接口MaskCompanyDetailState{
fieldId：编号；
}
导出类MaskCompanyDetail扩展React.Component{
公共构造函数（道具：任意）{
超级（道具）；
//设置字段默认值。
此.state={
字段ID:0，
};
}
公共组件didmount（）{
常量myField:string='fieldId'；
常量myVal:number=123；
this.setState（{[myField]：myVal}）；
this.setState（{myField:myVal}）；
}
}

来自TSLint的

this.setState（{[myField]：myVal}）的错误消息：

类型为“{[x:string]：number；}”的参数不可分配给类型为“MaskCompanyDetailState |”（prevState:Readonly，props:Readonly）=>MaskCompanyDetailState | Pick）| Pick”的参数。
类型“{[x:string]：number；}”缺少类型“Pick”中的以下属性：fieldId、fieldCompanyName、fieldStreetName、fieldStreetNumber和其他4个.ts（2345）

来自TSLint的
this.setState（{myField:myVal}）的错误消息：

类型为“{myField:number；}”的参数不能分配给类型为“MaskCompanyDetailState |”（prevState:Readonly，props:Readonly）=>MaskCompanyDetailState | Pick）| Pick”的参数。
对象文字只能指定已知属性，并且“myField”在类型“MaskCompanyDetailState |”（prevState:Readonly，props:Readonly）=>MaskCompanyDetailState | Pick）| Pick.ts（2345）中不存在

已经有帖子了，但我不知道如何应用建议的
IState
界面。
将以下字段添加到
MaskCompanyDetailState
界面-

[key: string]: any;

i、 e

这意味着您允许在您的状态中设置具有
string
类型的键和
any
类型的值的任何属性。
这就是你的链接所说的。这是Typescript的一个功能示例

实际上不建议这样做，因为从长远来看，这样会影响代码的可读性，团队中的其他人可能会滥用它。但是，除了重新考虑您的设计之外，我不知道还有什么其他解决方案可以解决您的困境。
是否要向对象添加属性？或者您想使用
myField
变量的值来动态设置属性名吗？为什么在
myField
键周围有引号？有点违背了计算属性的观点，
{['myField']:123}
与
{myField:123}
相同，我假设这不是您想要做的，我猜
myField
是一个变量，在这种情况下它应该是
{[myField]：123}
我通过指定最初的问题和提供更多的代码更新了这篇文章。切题相关：“TSLint”指的是现在不推荐使用的单独工具。你的意思可能是“TypeScript”。是否可以将其设置为“只读”
readonly
，这样就可以读/写现有字段，但可以阻止在运行时创建新字段？
[key:string]：any部分是一个索引签名，而不是真正的属性。我已经编辑了我的答案，添加了更多信息的链接。当您执行
this.setState（{[myField]：myVal}）时，可以将其设置为
readonly
在代码中，您实际上是在运行时状态下创建新字段/属性。这是没有办法的。
readonly
意味着您只能在state上创建一个属性（在数组的情况下进行变异）。顺便说一句，没有办法阻止人们在运行时使用
索引签名创建新字段。我的建议是在
MaskCompanyDetailState
中声明所有可能的字段，但将它们标记为可选字段，而不是使用
索引签名。
interface MaskCompanyDetailState {
    ... // existing fields
    [key: string]: any;
}