web-dev-qa-db-ja.com

反応するComponentDidMountでthis.propsにアクセスする

私は反応するのが初めてで、特定のプロジェクトにこだわっています。問題は、親コンポーネントから受け取った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です。

componentDidMountのthis.propsにアクセスする方法はありますか、または同じ結果を達成する他の方法はありますか？

これに関する別のことは、親コンポーネントのComponentDidMountで$.getJSON呼び出しも使用していることです。

事前に感謝します。

javascriptjqueryreactjs
14
Nithin krishna

クラスにコンストラクタを実装します。

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

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

おそらく、この反応バージョンでは、より簡単に入手できます。

6
Angel Cuenca

子コンポーネントの小道具にアクセスするには、子コンポーネントにコンストラクターを作成し、属性として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"]);

      }

    });

  }

これを行うと、子コンポーネント全体の小道具にアクセスできます

3
Shubham Khatri

おそらく、ajax呼び出し内のthisに問題があります。私の推測では、あなたのajax呼び出しでthisのインスタンスがajaxオブジェクトではなくリポジトリを参照するように、リポジトリでthisをバインドする必要があるでしょう。

3
Lakston

今このページにつまずく人のために、上に欠けているのは_$.getJSON_の後の.bind(this)です。そうしないと、_$.getJSON_内でthisにアクセスできません。

_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);
}
_
0
M3RS