Zugriff auf this.props in React ComponentDidMount

Ich bin neu im Reagieren und stecke bei einem bestimmten Projekt fest. Die Sache ist, dass ich eine habe api_url in this.props von einer übergeordneten Komponente empfangen. Und in dieser untergeordneten Komponente möchte ich verwenden api_url um einige Daten mit JSON abzurufen.

In der übergeordneten Komponente habe ich:

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

und in der untergeordneten Komponente möchte ich so etwas wie:

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

also was ich brauche ist das entsprechende api_url im URL-Abschnitt von $.getJSON.

Gibt es eine Zugriffsmöglichkeit this.props in componentDidMount oder gibt es eine andere Möglichkeit, die gleichen Ergebnisse zu erzielen?

Eine andere Sache in diesem Zusammenhang ist, dass ich auch a verwende $.getJSON rufen Sie an ComponentDidMount der übergeordneten Komponente.

Ein Dank im Voraus.

Implementieren Sie in Ihrer 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, es zu bekommen.

Um auf Requisiten in der untergeordneten Komponente zuzugreifen, müssen Sie einen Konstruktor in der untergeordneten Komponente erstellen und dann Requisiten 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 getan haben, können Sie auf Requisiten in Ihrer gesamten untergeordneten Komponente zugreifen

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

Für diejenigen, die jetzt über diese Seite stolpern, was oben fehlt, ist .bind(this) nach $.getJSON. Andernfalls können Sie nicht zugreifen this innerhalb $.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);
}

Mein Problem ist ähnlich, aber auf diese Weise zu lösen

    let self = this
    this.props.users.map(function (u, x) {
        if (self.props.data[u.name]) {
            //Stuff
        }
    }

Meine if-Anweisung erkannte keine Requisiten, also verwendete ich stattdessen self

Hast du versucht hinzuzufügen this.componentDidMount = this.componentDidMount.bind(this); zu deinem Konstrukteur? So erreichen Sie this aus componentDidMount.