为什么material-UI textField返回“无效的挂钩调用”错误

Question

我正在尝试从Material-UI创建一个文本字段，以更新类组件中的状态。发生错误，并返回“无效的挂接调用”错误。 Material-UI是否必须始终与React Hooks一起使用，还是可以不使用它？

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);

还可以在在线编辑器中here找到该代码。谢谢。

Answer 1

首先，将您的React版本从16.8.0更新为16.8.6。

然后，TextField value属性不能为null，请将您的初始状态更改为：

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

除了您的code works fine。