web-dev-qa-db-fra.com

Accéder à this.props dans dans ComponentDidMount

Bonjour les gars, je suis nouveau pour réagir et je suis coincé sur un certain projet. Le problème est que j’ai un api_urlin this.props reçu d’un composant parent. Et dans ce composant enfant, je veux utiliser api_url pour récupérer des données en utilisant JSON.

Dans la composante parent j'ai 

Repositories api_url={this.state.objs.repos_url}

et dans le composant enfant, je veux quelque chose comme 

componentDidMount() {

    $.getJSON(this.props.api_url, function(json) {
        for (var i = 0; i < json.length; i++) {
            var each_repo = json[i]
            console.log(each_repo["name"]);
        }

    });
}

donc ce dont j’ai besoin, c’est l’api_url correspondant dans la section url de $ .getJSON. 

Existe-t-il un moyen d'accéder à this.props dans composantDidMount ou existe-t-il un autre moyen d'obtenir les mêmes résultats?

Une autre chose à propos de cela est qu’im utilisant également un appel $ .getJSON dans le ComponentDidMount du composant parent. Un merci d'avance.

javascriptjqueryreactjs
9
Nithin krishna

Dans votre classe, implémentez le constructeur:

constructor(props){
  super(props);
  this.state = {
     //states
  };
}

componentDidMount(){
  //Get this.props
  console.log(this.props.nameOfProp);
};

Probablement à cette version de réaction est plus facile à obtenir.

4
Angel Cuenca

Pour accéder aux accessoires dans le composant enfant, vous devez créer un constructeur dans le composant enfant, puis transmettre les propriétés en tant qu'attribut à la fonction super () en tant que

constructor(props) {
   super(props);
   this.state = {}
}
componentDidMount(){

   $.getJSON(this.props.api_url , function(json) {
        for (var i = 0; i < json.length; i++) {
            var each_repo = json[i]
        console.log(each_repo["name"]);

      }

    });

  }

Ceci fait, vous pouvez accéder aux accessoires de l’ensemble de votre composant enfant. 

2
Shubham Khatri

Vous avez probablement un problème avec la this dans votre appel ajax. Je suppose que vous devez lier this dans vos référentiels afin que l'instance de this dans votre appel ajax fasse référence à des référentiels et non à l'objet ajax.

2
Lakston

Pour ceux qui trébuchent sur cette page maintenant, ce qui manque ci-dessus est .bind(this) après $.getJSON. Sinon, vous ne pourrez pas accéder à this dans $.getJSON.

componentDidMount() {

    $.getJSON(this.props.api_url, function(json) {
        for (var i = 0; i < json.length; i++) {
            var each_repo = json[i]
            console.log(each_repo["name"]);
        }

    }).bind(this);
}
0
M3RS