Uzyskiwanie dostępu do this.props in w reagowaniu ComponentDidMount

Question

Witajcie, jestem nowy, aby zareagować i utknąłem w pewnym projekcie. Chodzi o to, że mam api_urlin this.props otrzymane od komponentu nadrzędnego. W tym komponencie potomnym chcę użyć api_url do pobrania niektórych danych przy użyciu JSON.

W komponentu macierzystego mam

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

aw składniku dziecka, chcę coś

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

    }); 
} 

więc to, co jest mi potrzebne odpowiedni api_url w sekcji url $ .getJSON .

Czy istnieje sposób dostępu do this.props w componentDidMount lub czy jest jakiś inny sposób uzyskania tych samych wyników?

Inną rzeczą związaną z tym jest to, że im również za pomocą wywołania $ .getJSON w ComponentDidMount elementu nadrzędnego. Z góry dzięki.

Answer 1

W celu uzyskania dostępu Rekwizyty w składniku dziecka trzeba utworzyć konstruktor w komponencie dzieci, a następnie przejść rekwizyty jako atrybut do funkcji super() jako

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

     } 

    }); 

    } 

Po wykonaniu tej czynności można rekwizyty dostępu w całym składniku podrzędnym

Answer 2

Czy próbowałeś dodać this.componentDidMount = this.componentDidMount.bind(this); do swojego konstruktora? W ten sposób można uzyskać this z componentDidMount.

Answer 3

Prawdopodobnie masz problem z this wewnątrz połączenia ajax. Domyślam się, że musisz połączyć this w swoich repozytoriach, aby instancja this w twoim wywołaniu ajaxowym odnosiła się do repozytoriów, a nie do obiektu ajax.

Answer 4

W swojej klasie wdrożyć konstruktora:

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

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

Prawdopodobnie w tej wersji reakcji jest łatwiej je zdobyć.