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

【问题标题】：How to fix linting error with React's setState()如何使用 React 的 setState() 修复 linting 错误
【发布时间】：2019-07-19 11:01:24
【问题描述】：

我试图找出在 linting 我的 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,
}

【问题讨论】：

假设DialogNoConfigurationFileStatus 是一个枚举，你能把它添加到你的帖子中吗？
@SandraWillford 将枚举添加到帖子中。
我把它放到了一个本地项目中，没有出现任何 linting 错误。你可能想确保你的 typescript 和 tslint 包是最新的。
@SandraWillford 是对的，旧的 TypeScript defs 是这里的问题。如果您无法更新，请参阅我的答案以获取解决方法。

标签： reactjs typescript state lint tslint

【解决方案1】：

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

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

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

这基本上告诉 TypeScript：

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

【讨论】：