Get Json Daten von API-Funktion mit react.js

Question

Wie bekomme ich die JSON-Daten von apiUrl? Hilfe brauchen die Funktion

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

     getJson: function() { 

     }, 

Answer 1

Ihr Code ist ein wenig verwirrend, weil es schwer ist das Schreiben zu sagen, warum Sie apiURL in setState sind einstellen, wenn ich annehme, müssen Sie diese URL aufrufen, um die JSON-Daten zu erhalten. Der Kommentator macht einen guten Punkt über die Einrichtung einer Data-Retrieval-Architektur mit einer Bibliothek wie Redux. Wenn Sie jedoch nur einen einfachen JavaScript-Aufruf ausführen möchten, können Sie Folgendes tun: Es ist schwer zu sagen, ob Sie die Json-Ergebnisse im Status Ihrer Komponente benötigen, aber ich vermute, dass Sie das tun, also habe ich den Code unter Berücksichtigung dieser Annahme neu angeordnet.

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(); 
    }