如何使用 React 的 setState() 修复 linting 错误

Question

我正在尝试找出在检查我的 React TypeScript 项目时遇到的错误。设置状态时问题出在组件内：

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

linting 时出现的错误：

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

    ...

}

我的假设是我得到了 linting 错误，因为界面 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 for React（撰写本文时为 16.8.5），那么这应该不再是问题 - 旧定义不允许 'partial' 更新状态，但这在某些时候是固定的。

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

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

这基本上告诉 TypeScript：

Trust me, this is a valid DialogNoConfigurationFileState, I know what I'm doing.

如何使用 React 的 setState() 修复 linting 错误

How to fix linting error with React's setState()

state

lint

typescript

reactjs

tslint