如何在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
界面。
将以下字段添加到MaskCompanyDetailState
界面-
[key: string]: any;
即,
interface MaskCompanyDetailState {
... // existing fields
[key: string]: any;
}
这意味着您允许在状态中设置键类型为string
且值为any
类型的任何属性。这就是您的链接post所说的。这是Index Signature
的示例,它是Typescript的功能。
并不是真正推荐的方法,因为从长远来看,它会影响代码的可读性,并且团队中的其他人可能会滥用它。但是除了重新考虑您的设计之外,我不知道有什么其他解决您困境的方法。