Реагирует на массив setState, который не сортируется

Question

Мой код такой:

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

Итак. Функция обратного вызова в setState показывает старые данные, а в пользовательском интерфейсе также ничего не сортируется. Почему так?

edit : обнаружена проблема. Я также использую static getDerivedStateFromProps, и он каждый раз сбрасывает состояние.

Answer 1

handleFavourite, кажется, работает нормально

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>

Answer 2

Я бы проверил this.state.restaurants в componentDidUpdate, так как это лучший способ узнать, обновился ли ваш компонент.

Такое чувство, что вы делаете все правильно, если ваш первый журнал действительноправильно (мне кажется, это странный способ сортировки, я бы позвонил array.sort() на newRestaurants).

Может быть, где-то после обновления вашего компонента что-то снова возвращает рестораны к его первоначальному значению.