未处理的拒绝 (TypeError)：this.props.callbackFunction 不是函数

Question

我正在尝试从 child 组件更新 parent 组件状态属性。我正在编写一个小型 POC，它会发送请求以获取一些数据，每次发送请求时都会更新 parents state 属性，并让另一个 child 组件呈现 parents state 属性转换为图形（使用 CanvasJS）。无论如何，我已经学习了一些教程，它们似乎都在展示同样的东西。但是当我实现它时，我得到了 Unhandled Rejection (TypeError): this.props.callbackFunction is not a function 错误。这是我的代码：

Parent

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;

Child

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 | };

我试过在 callbackFunction 调用的末尾添加一个 .bind(this)，但还是一样。

Answer 1

在你的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;

将您的父组件更改为，（将回调函数添加为 props，以便它可以在子组件中作为 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 2

问题很简单，你没有把prop传给child。

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

所以在child中它将能够调用this.props.callbackFunction

Answer 3

您必须像这样为请求组件的回调属性提供一个值

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

这是一个有效的codesandbox

未处理的拒绝 (TypeError)：this.props.callbackFunction 不是函数

Unhandled Rejection (TypeError): this.props.callbackFunction is not a function

jsx

reactjs

axios

react-component