React setState array not getting sorted

Question

My code is this:

handleFavourite = id => {
    const { restaurants } = this.state;
    let newRestaurants = [...restaurants];
    newRestaurants = sort(newRestaurants, 'favourite');
    console.log(newRestaurants); // ALL GOOD
    this.setState({ restaurants: newRestaurants }, () => console.log(this.state.restaurants)); // CONSOLE LOG POSTS OLD DATA
};

So there. The callback function in setState shows old data and in UI nothing gets sorted as well. Why is it that way?

edit: Found the problem. I'm also using static getDerivedStateFromProps and it's resetting the state every time.

Reproducible example please, How to create a Minimal, Reproducible Example — Dennis Vash
– Dennis Vash, Commented Oct 12, 2019 at 10:39

dougajmcdonald · Accepted Answer · 2019-10-12 19:06:25Z

1

I'd be checking this.state.restaurants in componentDidUpdate as that's the best way to see if your component has been updated.

It feels like you're doing things correctly if your first log is indeed correct (it seems an odd way to sort to me, I'd be calling array.sort() on the newRestaurants).

Maybe somewhere after your component updates, something is setting the restaurants back to it's original value again.

edited Oct 12, 2019 at 19:06

answered Oct 12, 2019 at 10:29

dougajmcdonald

20.2k12 gold badges61 silver badges100 bronze badges

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

3 Comments

Xeen Over a year ago

componentDidUpdate shows updated state for the values that I'm changing in restaurants, but it's still not sorted. And the sort function in my example is using array.sort in the background.

dougajmcdonald Over a year ago

Is it possible you've got something funny going on in your render? what are you using for the key value?

dougajmcdonald Over a year ago

It's often something like that, it's not that you're doing it wrong where you look,it's changing elsewhere where you're not looking! :P Referring to my second paragraph "But maybe somewhere after your component updates, something is setting the restaurants back to it's original value again."

marzelin · Accepted Answer · 2019-10-12 10:44:41Z

handleFavourite seems to work a O.K.

class App extends React.Component {
  state = {
    restaurants: ["a", "b", "c"]
  }
  
  handleFavourite = id => {
    const { restaurants } = this.state;
    let newRestaurants = [...restaurants];
    newRestaurants = sort(newRestaurants, 'favourite');
    console.log(newRestaurants); // ALL GOOD
    this.setState({ restaurants: newRestaurants }, () => console.log(this.state.restaurants)); // CONSOLE LOG POSTS OLD DATA
}

render() {
  const restaurants = this.state.restaurants.map(r => <p>{r}</p>)
  return (
    <div>
      {restaurants}
    <hr/>
    <button onClick={this.handleFavourite}>sort</button>
    </div>
  )
}
}

function sort(r) {
  return r.reverse();
}

ReactDOM.render(<App/>, document.getElementById("root"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

anand k · Accepted Answer · 2022-02-12 13:33:18Z

0

 newRestaurants = sort(newRestaurants, 'favourite'); 
// This mutates the original array and does not create a new copy.

A workaround is to create a new copy using slice function
    newRestaurants = sort(newRestaurants, 'favourite').slice(); 
    this.setState({ restaurants: newRestaurants });

edited Feb 12, 2022 at 13:33

answered May 13, 2020 at 7:19

anand k

13 bronze badges

Collectives™ on Stack Overflow

React setState array not getting sorted

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related