Предупреждение TS при попытке обновить одно свойство состояния в реагирующем компоненте - PullRequest
Новая
       5

Предупреждение TS при попытке обновить одно свойство состояния в реагирующем компоненте

0 голосов
/ 25 марта 2020

Давайте предположим, что у нас есть простой компонент Component: 

import React, { Component } from 'react';

interface IState {
  a: boolean;
  b: string;
  c: number;
}

class Test extends Component<{}, IState> {
  state = {
    a: true,
    b: 'value',
    c: 7,
  };

  handleClick = () => {
    this.setState({ a: false });
  };

  render() {
    const { a, b, c } = this.state;
    return (
      <div>
        {a && b + c}
        <button onClick={this.handleClick}>Click</button>
      </div>
    );
  }
}

export default Test;

CodeSandbox: https://codesandbox.io/s/confident-shirley-zlxib?fontsize=14&hidenavigation=1&theme=dark

Но я получаю это сообщение: 

Argument type {a: boolean} is not assignable to parameter type ((prevState: Readonly<IState>, props: Readonly<{}>) => (Pick<IState, keyof IState> | IState | null)) | Pick<IState, keyof IState> | IState | null

Я нашел несколько подходов, которые могут решить этот тип предупреждений:

  1. Заменить IState на Partial<IState>
  2. Сделать все элементы IState необязательными 
interface IState {
  a: boolean;
  b: string;
  c: number;
}
Добавить as IState для this.setState({ a: false } as IState) Добавлять имя ключа каждый раз, когда мы выполняем setState this.setState<'a'>({ a: false } as IState) Обновлять весь объект: 
this.setState(prevState => ({
      ...prevState,
      a: false,
    }));

Но я думаю, что они не очень хороший способ справиться с этим. Итак, как лучше всего справиться с этим раздражающим предупреждением? UPD: я обнаружил, что получаю это предупреждение только в WebStorm. В CodeSandbox и VSCode нет предупреждений

1 Ответ

0 голосов
/ 25 марта 2020

Выбор языковой службы TypeScript

Исправлена ​​ошибка ie. Просто убедитесь, что выбран TypeScript Language Service.

...