Доступ к this.props в реагирует ComponentDidMount

Я новичок, чтобы реагировать, и я застрял на определенном проекте. Дело в том, что у меня есть api_url в this.props, полученный от родительского компонента. И в этом дочернем компоненте я хочу использовать api_url для получения некоторых данных с использованием JSON.

В родительском компоненте у меня есть:

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

и в дочернем компоненте я хочу что-то вроде:

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

так что мне нужен соответствующий api_url в разделе URL $.getJSON.

Есть ли способ получить доступ к this.props в componentDidMount или есть какой-то другой способ достижения тех же результатов?

Еще одна вещь, связанная с этим, заключается в том, что я также использую вызов $.getJSON в ComponentDidMount родительского компонента.

Спасибо заранее.

Ответ 1

В вашем классе реализуйте конструктор:

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

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

Вероятно, в этой реакционной версии легче получить его.

Ответ 2

Чтобы получить доступ к реквизитам в дочернем компоненте, вам нужно создать конструктор в дочернем компоненте, а затем передать реквизит в качестве атрибута функции super() как

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

      }

    });

  }

После этого вы можете получить доступ к реквизитам всего вашего дочернего компонента

Ответ 3

Вероятно, у вас есть проблема с this внутри вашего вызова ajax. Я предполагаю, что вам нужно привязать this в своих репозиториях, чтобы экземпляр this в вашем вызове ajax ссылался на репозитории, а не на объект ajax.

Ответ 4

Для тех, кто сейчас наткнулся на эту страницу, то, что отсутствует выше, .bind(this) после $.getJSON. В противном случае вы не сможете получить доступ к this в пределах $.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);
}

Ответ 5

Вы пытались добавить this.componentDidMount = this.componentDidMount.bind(this); к своему конструктору? Таким образом вы можете достичь this от componentDidMount.