React TypeError: «_this2.setState не является функцией»?

Я знаю, что этот вопрос часто задают, и я проверил большинство других предоставленных ответов, но до сих пор не могу понять, почему я получаю эту ошибку.

Ситуация:

У меня есть класс textinput, в котором у меня есть простая форма для ввода имени пользователем. Когда пользователь отправляет кнопку, вызывается REST-вызов моей серверной части, и пользовательский интерфейс должен отображать имя пользователя.

Я переопределил функцию componentDidMount моего класса App, чтобы иметь первоначальный вызов моего бэкэнда при загрузке страницы. Этот вызов работает, я получаю правильный ответ от своей серверной части, и пользовательский интерфейс обновляется.

Но когда я звоню из своего класса TextInput, я получаю сообщение об ошибке:

this2.setState is not a function

Я считаю, что это происходит потому, что я вызываю функцию из другого класса, а this state настроен неправильно. Я пытался связать все, но это ничего не меняло. Если у кого-то есть представление о том, что я делаю неправильно, это было бы очень полезно!

У меня есть следующие занятия:

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.info(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.

второй класс таков:

import React, { Component } from 'react';

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

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

    handleChangeEvent(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.handleChangeEvent} />
          </label>
          <input type = "submit" value = "Submit" />
        </form>
      );
    }
  }

Итак, вопрос в том, как мне правильно вызвать это в методе getFormattedNameFromBackend?

Решено:

ошибка заключалась в неправильной установке реквизита Textinputfield. Правильно должно быть

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