State value doesn't change when I call a function with setstate

Question

addTOList= (id) =>{
  const movieId = id
  const movie = movies.find( ({ id }) => id === movieId );
  const stateMovie = [...this.state.movie, movie]
  console.log(stateMovie)
  this.setState({
    movie : stateMovie
  })
  console.log(this.state.movie)
  localStorage.setItem('movies', JSON.stringify(this.state.movie))
  this.state.movie.map(mov =>{
  })
}

This function will be triggered when the (Add to list) button is clicked. but I have to click twice to change the state.` sorry for horrible English

State only changes during re-render, so the value will never change during the function. — JMadelaine, Apr 28 '20 at 09:25

score 0 · Answer 1 · answered Apr 28 '20 at 09:19

0

react state changes are synchronous.

Check this question & answer here

answered Apr 28 '20 at 09:19

Kid

1,160
2
14
31

score 0 · Answer 2 · answered Apr 28 '20 at 09:19

If your 'next state' depends on the 'previous state' then you should use this pattern:

  this.setState(prev => ({
    ...prev,
    movie : [...prev.movie, movie],
  }))

Also you must wait until the state change has been applied by react before you will see the changes in your console statement.

score 0 · Answer 3 · answered Apr 28 '20 at 11:29

setState is an async function, it do not setstate in async manner but later, you can use a callback function, if you want to run a code snippet after set state is run:

addTOList = () => { this.setState({ movie : stateMovie }, () => { console.log(this.state.movie) }) }

State value doesn't change when I call a function with setstate

3 Answers3