javascript - react 类型错误 : "_this2.setState is not a function"?

Question

我知道这个问题被问了很多，我确实检查了提供的大部分其他答案，但我仍然无法找出为什么会出现此错误。

情况:

我有我的 textinput 类，其中我有一个简单的表单供用户输入名称。当用户提交按钮时，将调用对我的后端的 REST 调用，并且 UI 应显示用户名。

我已经覆盖了我的 App 类的函数 componentDidMount 以在页面加载时对我的后端进行初始调用。此调用有效，我从后端获得正确答案，并且 UI 得到更新。

但是当我从我的 TextInput 类进行调用时，我得到了错误:

this2.setState is not a function

我相信发生这种情况是因为我从另一个类调用该函数并且 this state 设置不正确。我试图绑定(bind)所有的东西，但这并没有改变任何东西。如果有人知道我做错了什么，那将非常有帮助!

我有以下类(class):

import React, { Component } from 'react';
import logo from './logo.svg';
import Greeting from './components/greeting';
import TextInput from './components/textInput';
import './App.css';

const axios = require('axios');

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {name: "World"};
    this.getFormattedNameFromBackend.bind(this);
    this.setState.bind(this);
  }

  componentDidMount() {
    this.getFormattedNameFromBackend(this.state.name);
  }

  getFormattedNameFromBackend(name) {
    axios({
      method:'get',
      url:'http://localhost:8080/hello?name=' + name
    }).then((response) => {
      this.setState({ name : response.data.name});
    }).catch(function(error){
      console.log(error);
    });
  }


  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <Greeting data={this.state}/>
          <TextInput callBack = {this.getFormattedNameFromBackend}/>
        </header>
      </div>
    );
  }

}

export default App;

这是我在 axios rest 调用中遇到错误的主类。

第二课是这样的:

import React, { Component } from 'react';

export default class TextInput extends Component {
    constructor(props) {
      super(props);
      this.state = {value: ''};

      this.handleChange = this.handleChange.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChange(event) {
      this.setState({value: event.target.value});
    }

    handleSubmit(event) {
      this.props.callBack(this.state.value);

      event.preventDefault();
    }

    render() {
      return (
        <form onSubmit= {this.handleSubmit}>
          <label>
            Name:
            <input type="text" value={this.state.value} onChange={this.handleChange} />
          </label>
          <input type="submit" value="Submit" />
        </form>
      );
    }
  }

所以问题是，我如何在方法 getFormattedNameFromBackend 中调用正确的 this？

已解决:

错误是将 Textinputfield 的属性设置错误。正确的应该是

<TextInput callBack = {(name)=>this.getFormattedNameFromBackend(name)}/>

Answer 1

如果其他人遇到这个问题，https://reactjs.org/docs/handling-events.html很好地解释了为什么会这样。

简而言之，当调用事件回调时，this 没有绑定(bind)。

解决此问题的最简单方法是将其括起来:onSubmit={(e) => {this.handleSubmit(e)}(虽然每次都会创建一个新的函数实例，所以使用这个方法时需要小心)