Как исправить ошибку линтинга с помощью React's setState () - PullRequest
Новая
       79

Как исправить ошибку линтинга с помощью React's setState ()

0 голосов
/ 26 февраля 2019

Я пытаюсь выяснить, какую ошибку я получаю, когда пишу свой проект 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,
}

1 Ответ

0 голосов
/ 26 февраля 2019

Если вы используете последние определения TypeScript для React (16.8.5 на момент написания), то это больше не должно быть проблемой - старые определения не допускают «частичных» обновленийсостояния, но это было исправлено в некоторый момент.

Если обновление невозможно, и вы действительно хотите сохранить обязательные поля, вы можете использовать приведение в качестве обходного пути, чтобы ошибка типа исчезла 

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

Это, по сути, говорит TypeScript:

Поверьте мне, это действительный DialogNoConfigurationFileState, я знаю, что я делаю.

...