reactjs - это - готовые компоненты react




Невозможно присвоить «состояние», потому что это постоянное или свойство только для чтения (2)

Прежде чем откатываться назад (как было предложено ответом @ torvin), прочитайте https://github.com/DefinitelyTyped/DefinitelyTyped/pull/26813#issuecomment-400795486 .

Это не должно было быть регрессией - решение состоит в том, чтобы использовать state как свойство . Это лучше, чем предыдущий подход ( state установки в конструкторе), потому что:

  • вам больше не нужен конструктор
  • вы не можете забыть инициализировать состояние (теперь это ошибка времени компиляции)

Например:

type Props {}

type State {
  active: boolean
}

export default class Square extends React.Component<Props, State> {
  public readonly state: State = {
    active: false
  }

  public render() {
    //...
  }
}

Другой подход:

type Props {}

const InitialState = {
  active: false
}

type State = typeof InitialState

export default class Square extends React.Component<Props, State> {
  public readonly state = InitialState

  public render() {
    //...
  }
}

Когда я выполняю поиск по этой проблеме, я могу найти только те вопросы, которые изменяют this.state прямо где-то в this.state метода, а не используя this.setState() . Моя проблема в том, что я хочу установить начальное состояние в конструкторе следующим образом:

export default class Square extends React.Component<any, any> {
  constructor(props: any) {
    super(props);
    this.state = {
      active: false
    };
  }

  public render() {
    ...
  }
}

Приложение не может начать со следующей ошибки компиляции:

Cannot assign to 'state' because it is a constant or a read-only property

И это потому, что в определении React.Component мы имеем:

readonly state: null | Readonly<S>;

Поэтому я не знаю, как это сделать. Официальное учебное пособие по JS прямо присваивает this.state и говорит, что это приемлемый шаблон для этого в конструкторе, но я не могу понять, как это сделать с помощью TypeScript.


Это, по-видимому, недавнее изменение в @types/react 542f3c0 введенное в commit 542f3c0 которое работает не очень хорошо, учитывая тот факт, что TypScript не поддерживает назначение родительских полей readonly в производных конструкторах.

Я предлагаю вернуться к предыдущей версии @types/react . Версия 16.4.2 представляется последней, прежде чем произойдет неудачное изменение.

Вы можете привязать версию, удалив ^ в вашем package.json :

"devDependencies": {
  ...
  "@types/react": "16.4.2",

Также ознакомьтесь с обсуждением этого изменения на странице запроса на определенную типу github