react.jsを使用してAPI関数からjsonデータを取得

Question

apiUrlからjsonデータを取得するにはどうすればよいですか？私はあなたがJSONデータを取得するためにそのURLを呼び出す必要があると仮定したとき、それはあなたがSETSTATEでapiURLを設定している理由を伝えるのは難しいですので、

changeUrl: function(evt){ 
     this.setState({ 
      value: evt.target.value, 
      apiUrl: "https://test.holmusk.com/food/search?q=" + evt.target.value 
     }); 
     }, 

     getJson: function() { 

     }, 

Answer 1

あなたのコードは少し混乱して機能を書いて、いくつかの助けが必要。このコメント作成者は、Reduxのようなライブラリを使用してデータ検索アーキテクチャを設定することについて良い点を示しています。ただし、プレーンバニラのJavascriptコールを行う場合は、以下のようにすることができます。コンポーネントの状態でJsonの結果が必要かどうかを判断するのは難しいですが、私はあなたが推測しているので、その前提を念頭に置いてコードを再構成しました。

changeUrl: function(evt){ 
      getJson(evt.target.value); 
    }, 

    getJson: function(newVal) { 
     var request = new XMLHttpRequest(); 
     request.open('GET', "https://test.holmusk.com/food/search?q=" + newVal, true); 
      request.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');  
      //this callback gets called when the server responds to the ajax call    
      request.onreadystatechange = function(){ 
       if (request.readyState === 4 && request.status === 200){ 
        var returnedJson = JSON.parse(request.responseText); 
        //this is where you would want to run setState if you need the returned Json for it. 
        setState({newJson: returnedJson}); 
       } 
       else if (request.readyState === 4 && request.status !== 200){ 
        alert('error'); 
       }   
      };  
      request.send(); 
    }