在 react ComponentDidMount 中访问 this.props

IT技术 javascript jquery reactjs
2021-05-23 14:55:11

我是新手，我被困在某个项目上。事情是，我有一个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。

提前致谢。

4个回答

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

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

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

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

为了访问子组件中的 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"]);

      }

    });

  }

完成此操作后，您可以访问整个子组件中的props

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

对于那些谁现在这个页面上跌倒，什么上面缺少的是.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);
}
其它你可能感兴趣的问题
上一篇大型零件的光滑表面 下一篇运行 React App 时出现“无效的主机标头”