почему textField пользовательского интерфейса возвращает ошибку 'Invalid hook call'

Question

Я пытаюсь создать текстовое поле из Material-UI, которое обновляет состояние в компоненте класса. Что-то не так, и он возвращает ошибку «неверный вызов хука». Должен ли материал-интерфейс всегда использоваться с крючками React или без него?

import React, { Component } from "react";
import ReactDOM from "react-dom";
import TextField from "@material-ui/core/TextField";


class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      year: null,
      otherAttributes: null
    };
    this.handleChangefor = this.handleChangefor.bind(this);
  }

  handleChangefor = (propertyName) => (event) => {
    this.setState({
      ...this.state,
      [propertyName]: event.target.value
    })
  }

  render() {
    return (
      <div>
        <TextField
          id="outlined-name"
          label="year"
          value={this.state.year}
          onChange={this.handleChangefor('year')}
          margin="normal"
          variant="outlined"
          />
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Код также можно найти здесь в онлайн-редакторе. Спасибо.

Answer 1

Сначала обновите свою версию реакции с 16.8.0 до 16.8.6.

Тогда свойство TextField value не может быть null, измените исходное состояние на:

this.state = {
  year: "",
  otherAttributes: null
};

За исключением того, что ваш код работает нормально .