Необработанный отказ (TypeError): this.props.callbackFunction не является функцией

Question

Я пытаюсь обновить свойства состояния родительских компонентов из дочернего компонента. Я пишу небольшой PO C, который будет отправлять запрос для получения некоторых данных, обновлять родительские свойства state каждый раз, когда я отправляю запрос, а другой дочерний компонент отображает родительские state свойства в граф (используя Canvas JS). Во всяком случае, я следовал нескольким учебникам, и они, кажется, показывают то же самое. Но когда я это реализую, я получаю ошибку Unhandled Rejection (TypeError): this.props.callbackFunction is not a function. Вот мой код:

Родитель

import React, { Component } from "react";
import H2Request from "./myRequest";

class AllComponents extends Component {
  state = {
    items: this.props.value
  };

  callbackFunction = childData => {
    this.setState({ items: childData });
  };

  render() {
    return (
      <div>
        <MyRequest dataFromParent={this.state.items} />
      </div>
    );
  }
}

export default AllComponents;

Ребенок

import React, { Component } from "react";
import axios from "axios";
import "../App.css";

class MyRequest extends Component {

  handleClick = () => {
    axios.get("http://localhost:8003").then(response => {
      this.props.callbackFunction(response.data);
    });
  };

  render() {
    return (
      <div className="button_container">
        <button className="button" onClick={() => this.handleClick()}>
          Refresh
        </button>
        <h1>
          Items:
          {JSON.stringify(this.props.dataFromParent, null, 2)}
        </h1>
      </div>
    );
  }
}

export default MyRequest;

Но когда я нажимаю мой Refresh Кнопка, я получаю следующую ошибку:

Unhandled Rejection (TypeError): this.props.callbackFunction is not a function
(anonymous function)
src/components/h2Request.jsx:10
   7 |   axios.get("http://localhost:8003").then(response => {
>  8 |     this.props.callbackFunction(response.data);
   9 | ^ });
  10 | };

Я попытался добавить .bind(this) в конце callbackFunction, но то же самое.

Answer 1

Проблема проста, вы не передали опору ребенку.

 <MyRequest dataFromParent={this.state.items} callbackFunction={this.callbackFunction} /> 

Так что на ребенка он сможет звонить this.props.callbackFunction

Answer 2

В вашем AllComponent вы определили функцию, но не включены в реквизиты дочернего компонента

import React, { Component } from "react";
import H2Request from "./myRequest";

class AllComponents extends Component {
  state = {
    items: this.props.value
  };

  callbackFunction = childData => {
    this.setState({ items: childData });
  };

  render() {
    return (
      <div>
        <MyRequest dataFromParent={this.state.items} /> // see no callBackFunction in props
      </div>
    );
  }
}

export default AllComponents;

Измените свой родительский компонент на (добавьте callbackFunction в качестве реквизита, чтобы к нему можно было обращаться в дочернем компоненте как this.props.callbackFunction())

import React, { Component } from "react";
import H2Request from "./myRequest";

class AllComponents extends Component {
  state = {
    items: this.props.value
  };

  callbackFunction = childData => {
    this.setState({ items: childData });
  };

  render() {
    return (
      <div>
        <MyRequest dataFromParent={this.state.items} callbackFunction={()=>this.callbackFunction()} /> // add callback as props in here
      </div>
    );
  }
}

export default AllComponents;

Answer 3

Вы должны указать значение для callbak prop вашего Requestcomponent следующим образом:

<MyRequest
    dataFromParent={this.state.items}
    callbackFunction={this.callbackFunction.bind()}
/>

Вот рабочая codesandbox