1
votes

Rejet non géré (TypeError): this.props.callbackFunction n'est pas une fonction

J'essaie de mettre à jour les propriétés d'un état de composants parents à partir d'un composant enfant. J'écris un petit POC qui enverra une demande pour obtenir des données, mettra à jour les propriétés state des parents à chaque fois que j'envoie la demande et qu'un autre composant enfant rendra le state code des parents > propriétés dans un graphe (en utilisant CanvasJS). Quoi qu'il en soit, j'ai suivi quelques tutoriels et ils semblent montrer la même chose. Mais quand je l'implémente, j'obtiens l'erreur Unhandled Rejection (TypeError): this.props.callbackFunction n'est pas une erreur de fonction . Voici mon code:

Parent

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

reactjs axios react-component jsx

3 commentaires

callbackFunction n'est pas disponible dans le composant enfant car vous ne le passez pas à l'intérieur du composant enfant. Vous devez le transmettre comme accessoire et l'appeler dans le gestionnaire onClick.

Vous ne le passez pas comme accessoire, vérifiez la réponse :)

Génial, merci à tous. Je suis encore assez nouveau sur React (en fait, le développement frontal en général), mais cela semble assez évident maintenant.

3 Réponses :

2
votes

Dans votre AllComponent, vous avez défini la fonction mais pas inclus dans les accessoires du composant enfant

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;

Changez votre composant parent en, (ajoutez callbackFunction comme accessoires, afin qu'il soit accessible dans le composant enfant comme 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} /> // see no callBackFunction in props
      </div>
    );
  }
}

export default AllComponents;

0 commentaires

2
votes

Le problème est simple, vous n'avez pas transmis l'accessoire à l'enfant.

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

Ainsi, dans l'enfant, il pourra appeler this.props.callbackFunction

0 commentaires

0
votes

Vous devez fournir une valeur pour la prop callbak de votre Requestcomponent comme ceci

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

Voici un codesandbox

0 commentaires