反应：TypeError：无法读取未定义的属性“状态”。需要说明

Question

我刚刚开始使用 React，我遇到了这个小 TypeError: Cannot read property 'state' of undefined，我相信这是一个基本的 JS 东西。有人可以解释一下为什么我使用普通函数语法而不是箭头函数语法时不断收到此错误。这是我写的代码：

class App extends React.Component {
  state = {term: ''};

  onFormSubmit(e) {
    e.preventDefault();
    console.log(this.state.term)
  }

  render() {
    return (
      <div className="ui segment">
        <form onSubmit={this.onFormSubmit} className="ui form">
          <div className="field">
            <label>Image Search</label>
            <input
              type="text"
              placeholder="Search"
              value={this.state.term}
              onChange={e => this.setState({ term:e.target.value })}
            />
          </div>
        </form>
        <h1 className="ui segment">{this.state.term}</h1>
      </div>
    );
  }
}

我们将不胜感激。谢谢！

Answer 1

类组件中的函数有两种使用this的方式

第一个是bind他们在constructor里面

 constructor() {
    super();
    this.onFormSubmit= this.onFormSubmit.bind(this);
  }

其次是使用这种方法

  onFormSubmit = e => {
    e.preventDefault();
    console.log(this.state.term)
  }

Answer 2

你正在使用一个类组件，所以你需要一个像这样的构造函数 (documentation)

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      term: ''
    };
    this.onFormSubmit= this.onFormSubmit.bind(this);
  }
}

super 关键字是指父类。

用来调用父类的构造函数，访问父类的属性和方法，这显然是你想做的。

当事件发生并调用处理程序时，this 值回退到默认绑定并设置为undefined，因为类声明和原型方法在严格模式下运行。 当我们将事件处理程序的this 绑定到构造函数中的组件实例时，我们可以将其作为回调传递，而不必担心它会丢失上下文。 Read more

然后，如果你想使用常规函数，你需要将该函数的this 与你声明的类绑定。

此时你可以开始编写你的函数了：

  onFormSubmit(e) {
    e.preventDefault();
    console.log(this.state.term)
  }

另一种解决方法是使用箭头函数：

  const onFormSubmit = e => {
    e.preventDefault();
    console.log(this.state.term)
  }

或者，您可以使用函数组件。箭头函数起作用的原因是它没有创建它的own this。所以，onFormSubmit 中的 this 指的是 Example 类而不是它本身，这显然是未定义的 (Read more)。

Answer 3

建议：- 使用功能组件

有两种方法可以解决这个问题

改变：-

<form onSubmit={this.onFormSubmit} className="ui form">

到

<form onSubmit={(e) => this.onFormSubmit(e)} className="ui form">

或

改变：-

onFormSubmit(e){
    e.preventDefault();
    console.log(this.state.term);
  };

到

const onFormSubmit = (e) => {
        e.preventDefault();
        console.log(this.state.term);
      };