Reactjs 未处理的拒绝（TypeError）：this.props.callbackFunction不是函数

我正在尝试从子组件更新父组件状态属性。我正在编写一个小POC，它将发送一个请求以获取一些数据，每次发送请求时更新父级

状态

属性，并让另一个子组件将父级

状态

属性渲染成一个图（使用CanvasJS）。不管怎样，我已经学习了一些教程，它们似乎展示了同样的东西。但是当我实现它时，我得到了

未处理的拒绝（TypeError）：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} />
      </div>
    );
  }
}

export default AllComponents;


我已尝试在调用调用的末尾添加一个
.bind（this）
，但事情是一样的。
在您的AllComponent中，您定义了函数，但未包含在子组件props中

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;

问题很简单，你没有把道具传给孩子

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



因此，在子级中，它将能够调用
this.props.callbackFunction
您必须像这样为Requestcomponent的callbak prop提供一个值

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;

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



这里有一个工作
callback函数在子组件内不可用，因为您没有在子组件内传递它。您需要将其作为道具传递，并在onClick处理程序中调用。如果您没有将其作为道具传递，请检查答案：）太棒了，谢谢大家。我还是一个新手（事实上，一般来说是前端开发人员），但这一点现在似乎很明显。
 <MyRequest dataFromParent={this.state.items} callbackFunction={this.callbackFunction} /> 

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