根据reactjs中的条件设置状态

Question

I have a simple API call that sets the state of a list array with its response. I was wondering how I would go about implement a try/catch or error message if there is a bad search (ie like a typo) or if the array is not set with the response. The code snippet is below:

componentDidMount() {
    this.search('https://itunes.apple.com/search?term=modern_baseball');
}

search(URL) {
   return $.ajax({
        type: 'GET',
        dataType: 'json',
        url: URL,
        success: function (response) {
            this.showResults(response);
        }.bind(this),
        error: function() {
            alert("Error handling request");
        }
    });
}

showResults(response) {
    console.log(response);
    this.setState({
        searchResults: response.results,
        moveResults: []
    });
}

Answer 1

Try something like this:

componentDidMount() {
    this.search('https://itunes.apple.com/search?term=modern_baseball');
}

search(URL) {
  let self = this; //avoid the .bind call and store a ref to the current context for use inside the ajax handlers.
   return $.ajax({
        type: 'GET',
        dataType: 'json',
        url: URL,
        success: function (response) {
            self.showResults(response);
        },
        error: function() {
            alert("Error handling request");
            self.setState({error: "Error handling request", moveResults:[], searchResults:[]}); //set the state directly if there is an error
        }
    });
}

showResults(response) {
    console.log(response);
    this.setState({
        searchResults: response.results,
        moveResults: []
    });
}

It sets a variable (self) to the current context (this) and then calls the setState directly in the error handler for the ajax call. Alternatively you could define a callback function just like you do for the success handler.