webentwicklung-frage-antwort-db.com.de

Zugriff auf this.props in react ComponentDidMount

Hallo Leute, ich bin neu zu reagieren und ich bin auf ein bestimmtes Projekt gefasst. Die Sache ist, dass ich eine api_urlin habe, die this.props von einer übergeordneten Komponente erhalten hat. In dieser untergeordneten Komponente möchte ich api_url verwenden, um Daten mithilfe von JSON abzurufen.

In der übergeordneten Komponente habe ich 

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

und in der Kindkomponente möchte ich so etwas 

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"]);
        }

    });
}

was ich also brauche, ist das entsprechende api_url in der URL-Sektion von $ .getJSON. 

Gibt es eine Möglichkeit, auf this.props in componentDidMount zuzugreifen, oder gibt es eine andere Möglichkeit, dieselben Ergebnisse zu erzielen?

Eine andere Sache in dieser Hinsicht ist, dass ich auch einen $ .getJSON-Aufruf in ComponentDidMount der übergeordneten Komponente verwendet. Ein Dank im Voraus.

9
Nithin krishna

Implementiere in deiner Klasse den Konstruktor:

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

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

Wahrscheinlich ist es bei dieser Reaktionsversion einfacher, sie zu bekommen.

4
Angel Cuenca

Um auf Requisiten in der untergeordneten Komponente zuzugreifen, müssen Sie einen Konstruktor in der untergeordneten Komponente erstellen und dann props als Attribut an die Funktion super () übergeben

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"]);

      }

    });

  } 

Sobald Sie dies tun, können Sie auf Requisiten in Ihrer gesamten untergeordneten Komponente zugreifen 

2
Shubham Khatri

Sie haben wahrscheinlich ein Problem mit der this in Ihrem Ajax-Aufruf. Meine Vermutung wäre, dass Sie this in Ihren Repositorys binden müssen, damit die Instanz von this in Ihrem Ajax-Aufruf auf Repositorys und nicht auf das Ajax-Objekt verweist.

2
Lakston

Für diejenigen, die jetzt auf dieser Seite stolpern, fehlt .bind(this) nach $.getJSON. Andernfalls können Sie nicht auf this innerhalb von $.getJSON zugreifen.

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