Question

大家好，我是新手做出反应，我被困在某个项目上。问题是我有一个api_urlin 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"]);
        }

    });
}

所以我需要的是$ .getJSON的url部分中相应的api_url。

有没有办法在componentDidMount中访问this.props，还是有其他方法可以获得相同的结果？

另一件事是我也在父组件的ComponentDidMount中使用$ .getJSON调用。提前谢谢。

Answer 1

在你的类中实现构造函数：

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

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

可能在这个反应版本中更容易获得它。

Answer 2

要访问子组件中的Props，您需要在子组件中创建一个构造函数，然后将props作为属性传递给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"]);

      }

    });

  }

执行此操作后，您可以访问整个子组件中的道具

Answer 3

你的ajax调用中的this可能有问题。我的猜测是你必须在你的存储库中绑定this，以便你的ajax调用中的this实例引用存储库而不是ajax对象。

Answer 4

对于那些现在偶然发现此页面的人，.bind(this)之后{1}}上面缺少的是$.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);
}

Answer 5

我的问题很相似，但可以通过这种方式解决

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

我的 if 语句不能识别 props，所以用 self 代替

Answer 6

您是否尝试将this.componentDidMount = this.componentDidMount.bind(this);添加到构造函数中？这样，您就可以从this到达componentDidMount。

访问this.props in in react ComponentDidMount

6 个答案: