Question

我试图弄清我的React TypeScript项目时出现的错误。设置状态时问题出在组件内：

this.setState({dialogStatus: DialogNoConfigurationFileStatus.Create});

掉毛时出现的错误：

Property 'creationStep' is missing in type '{ dialogStatus: DialogNoConfigurationFileStatus.Create; }'.
Error at src/dialogs/dialog-no-configuration-file.tsx:137:23: Argument of type '{ creationStep: number; }' is not assignable to parameter of type 'DialogNoConfigurationFileState'.

组件的结构：

export interface DialogNoConfigurationFileState {
    dialogStatus: DialogNoConfigurationFileStatus;
    creationStep: number;
}

export class DialogNoConfigurationFile extends React.Component<DialogNoConfigurationFileProps, DialogNoConfigurationFileState> {
    public constructor(props: any) {
        super(props);
        this.state = {
            dialogStatus: DialogNoConfigurationFileStatus.Enter,
            creationStep: 0
        };
    }

    ...

}

我的假设是我得到了棉绒错误，因为接口DialogNoConfigurationFileState中的两个参数都是必需的。将它们都设置为可选时，错误消失了：

export interface DialogNoConfigurationFileState {
    dialogStatus?: DialogNoConfigurationFileStatus;
    creationStep?: number;
}

不过，我想让他们保留。这样做的原因是因为我想在构造函数中强制创建状态。这样，我可以确定从组件内部访问this.state.creationStep时状态已设置。如果将状态参数设置为可选，则必须首先检查状态和状态参数是否已分配。我想避免的一步。

在这里要做的最好的事情是什么？我是否在不知不觉中在此处创建了错误的代码？即使linting失败，代码仍然可以正常运行，但是TSLint背后的人们一定对这个错误有一个想法。

有人可以详细说明吗？

编辑1：

此枚举DialogNoConfigurationFileStatus：

export enum DialogNoConfigurationFileStatus {
    Enter,
    Create,
}

Answer 1

如果您将latest TypeScript definitions用于React（在撰写本文时为16.8.5），那么这应该不再是问题-较早的定义不允许状态的“部分”更新，但这固定在某个时候。

如果无法更新，并且您确实想保留必填字段，则可以使用强制转换作为解决方法，以消除类型错误

this.setState({
  dialogStatus: DialogNoConfigurationFileStatus.Create
} as DialogNoConfigurationFileState);

这实际上告诉TypeScript：

相信我，这是有效的DialogNoConfigurationFileState，我知道我在做什么。

如何使用React的setState（）修复掉毛错误

1 个答案: