Question

如何在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});
    }
}

TSLint针对this.setState({[myField]: myVal});发送的错误消息：

'{[x：string]：number;类型的参数}'不可分配给'MaskCompanyDetailState |类型的参数。（（（prevState：只读，props：只读）=> MaskCompanyDetailState | Pick <...>）|选择<...>'。输入'{[x：string]：数字； }”缺少类型“ Pick”中的以下属性：fieldId，fieldCompanyName，fieldStreetName，fieldStreetNumber和另外4个。ts（2345）

TSLint针对this.setState({myField: myVal});发出的错误消息：

类型'{myField：number; }'不可分配给'MaskCompanyDetailState |类型的参数。（（（prevState：只读，props：只读）=> MaskCompanyDetailState | Pick <...>）|选择<...>'。对象文字只能指定已知的属性，并且'myField'在'MaskCompanyDetailState |类型中不存在。（（（prevState：只读，props：只读）=> MaskCompanyDetailState | Pick <...>）|选择<...>'。ts（2345）

已经有帖子here，但我看不到如何应用建议的IState界面。

Answer 1

将以下字段添加到MaskCompanyDetailState界面-

[key: string]: any;

即

interface MaskCompanyDetailState {
    ... // existing fields
    [key: string]: any;
}

这意味着您允许在状态中设置键类型为string且值为any类型的任何属性。这就是您链接的post所说的。这是Index Signature的一个示例，它是Typescript的功能。

实际上不建议这样做，因为从长远来看，它会影响代码的可读性，并且团队中的其他人可能会滥用它。但是除了重新考虑您的设计之外，我不知道有什么其他解决您困境的方法。

使用字符串动态反应setState

1 个答案: