1
votes

Le tableau de réaction setState n'est pas trié

Mon code est le suivant:

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

Alors voilà. La fonction de rappel dans setState affiche les anciennes données et dans l'interface utilisateur, rien n'est également trié. Pourquoi en est-il ainsi?

modifier : le problème a été détecté. J'utilise également static getDerivedStateFromProps et je réinitialise l'état à chaque fois.

javascript reactjs ecmascript-6 state sorting

1 commentaires

Exemple reproductible, Comment créer un exemple minimal et reproductible

3 Réponses :

1
votes

Je vérifierais this.state.restaurants dans componentDidUpdate car c'est la meilleure façon de voir si votre composant a été mis à jour.

J'ai l'impression que vous faites les choses correctement si votre premier journal est en effet correct (cela me semble une façon étrange de trier, j'appellerais array.sort () sur le < code> newRestaurants ).

Peut-être que quelque part après la mise à jour de vos composants, quelque chose est en train de remettre les restaurants à leur valeur d'origine.

3 commentaires

componentDidUpdate affiche l'état mis à jour des valeurs que je modifie dans les restaurants , mais il n'est toujours pas trié. Et la fonction sort dans mon exemple utilise array.sort en arrière-plan.

Est-il possible que vous ayez quelque chose de drôle dans votre rendu? qu'utilisez-vous pour la valeur de la clé ?

C'est souvent quelque chose comme ça, ce n'est pas que tu le fais mal là où tu regardes, ça change ailleurs où tu ne regardes pas! : P En se référant à mon deuxième paragraphe "Mais peut-être quelque part après la mise à jour de vos composants, quelque chose redonne aux restaurants leur valeur d'origine."

0
votes

handleFavourite semble fonctionner correctement

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

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"))

0 commentaires

0
votes

newRestaurants = sort(newRestaurants, 'favourite').slice(); 
this.setState({ restaurants: newRestaurants });

0 commentaires