使用react.js从api函数获取json数据

Question

How can I get the json data from apiUrl? Need some help writing the function

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

      getJson: function() {

      },

Answer 1

Your code is a bit confusing because it's hard to tell why you're setting apiURL in setState, when I assume you need to call that URL to get the Json data. The commenter makes a good point about setting up a data-retrieval architecture using a library like Redux. However, if you want to just do a plain-vanilla Javascript call, you could do something like below. It's hard to tell if you need the Json results in your component's state, but I'm guessing you do, so I rearranged the code with that assumption in mind.

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