React - setState not updating array

Question

Here's my code :

class App extends Component {
  state = {
    query: '',
    results: []
  }
  handleSearch(e) {
    var query = e.target.elements.query.value;
   axios.get("http://www.omdbapi.com/?s=" + query + "&page=1&apikey=xxxx")
      .then(function (response) {
        console.log(response.data);
        this.setState({
          results: response.data.Search
        });
      }.bind(this))
      .catch(function (error) {
      });
    e.preventDefault();
  }

I'm trying to fetch data from omdb and show it on page.

the problem is setState not updating an array results?

Any idea ? Thanks

If you write console.error(error); inside your catch function, does it log anything to the console? Do you get an error in the Network tab of your Developer Tools? — Tholle
– Tholle, Commented Nov 11, 2018 at 21:55
@Tholle yes ; the output is "TypeError: Cannot read property 'setState' of undefined " — fox
– fox, Commented Nov 11, 2018 at 22:02
@Chino Alright. Then you most likely need to bind handleSearch to this in the constructor, or make handleSearch into a class property arrow function: handleSearch = (e) => { ... }; — Tholle
– Tholle, Commented Nov 11, 2018 at 22:03
Thank you so much guys, you can write it as answer if you want. — fox
– fox, Commented Nov 11, 2018 at 22:15

Tholle · Accepted Answer · 2018-11-11 22:14:31Z

1

You bind the function called when the axios requests completes correctly, but you must also bind the handleSearch method itself. You could do this in the constructor, or use a class property arrow function instead:

class App extends Component {
  state = {
    query: '',
    results: []
  }

  handleSearch = (e) => {
    // ...
  }
}

answered Nov 11, 2018 at 22:14

Tholle

113k22 gold badges209 silver badges198 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React - setState not updating array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related