为什么material-UI textField返回“无效的挂钩调用"错误 [英] why material-UI textField returns 'Invalid hook call' error

问题描述

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

I'm trying to create a textfield from Material-UI that update state in a class component. Something is wrong and it returns 'invalid hook call' error. Must Material-UI be always used with React Hooks or could it be used without?

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

还可以在在线编辑器中的此处中找到该代码.谢谢.

The code can also be found here in online editor. Thanks.

推荐答案

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

First, update your react version from 16.8.0 to 16.8.6.

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

Then, TextField value property can't be null, change your initial state to:

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

除了您的代码可以正常工作.

这篇关于为什么material-UI textField返回“无效的挂钩调用"错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！