使用字符串动态响应 setState

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

来自 this.setState({[myField]: myVal}); 的 TSLint 的错误消息：

Argument of type '{ [x: string]: number; }' is not assignable to parameter of type 'MaskCompanyDetailState | ((prevState: Readonly, props: Readonly) => MaskCompanyDetailState | Pick<...>) | Pick<...>'. Type '{ [x: string]: number; }' is missing the following properties from type 'Pick': fieldId, fieldCompanyName, fieldStreetName, fieldStreetNumber, and 4 more.ts(2345)

来自 this.setState({myField: myVal}); 的 TSLint 的错误消息：

Argument of type '{ myField: number; }' is not assignable to parameter of type 'MaskCompanyDetailState | ((prevState: Readonly, props: Readonly) => MaskCompanyDetailState | Pick<...>) | Pick<...>'. Object literal may only specify known properties, and 'myField' does not exist in type 'MaskCompanyDetailState | ((prevState: Readonly, props: Readonly) => MaskCompanyDetailState | Pick<...>) | Pick<...>'.ts(2345)

已经有 post ，但我不知道如何应用建议的 IState 界面。

Answer 1

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

[key: string]: any;

即

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

这意味着您允许在您的状态下设置具有 string 类型键和 any 类型值的任何属性。这就是您链接的内容 says. This is an example of Index Signature，这是 Typescript 的一项功能。

不推荐这样做，因为它会影响您代码的可读性运行并且您团队中的其他人可能会滥用它。但是除了重新考虑你的设计，我不知道还有什么其他的办法可以解决你的困境。

使用字符串动态响应 setState

React setState dynamically using string

reactjs

typescript

state

tslint