La fonction de tri React / Redux ne met pas à jour l'état

Le tri n'a qu'un seul argument (la fonction de tri). Et dans votre méthode sortAlphabetically, setState (placé comme deuxième argument de tri) n'est pas appelé. La méthode devrait être quelque chose comme ça (je ne l'ai pas testé)

sortAlphabetically = () => {
    console.log("sort button clicked")
    const newArray = this.props.cars.cars.slice();
    const orgArray = newArray.sort(function (a, b) {
        var nameA = a.name.toUpperCase();
        var nameB = b.name.toUpperCase();
        if (nameA < nameB) {
            return -1;
        } else if (nameA > nameB) {
            return 1;
        }
        return 0;
    });
    this.setState({ cars: orgArray }, () => {
        console.log(orgArray);
        this.props.sortCar(orgArray);
    });
}

Premièrement, je pense que vous n'avez pas besoin d'état ici, vous pouvez simplement mettre à jour le magasin et montrer les voitures à partir d'accessoires.

De plus, je pense que le problème ici est que vous transmettez orgArray à this.props.sortCar (orgArray) qui est un tableau au lieu d'un objet avec la clé et les valeurs "cars" à l'intérieur.

En dehors de cela, l'appel setState est déclaré comme une fonction anonyme au lieu d'être réellement exécuté après le tri.

Assurez-vous de mettre votre code en retrait.

Vous avez une solution qui utilise simplement l'état local au lieu du magasin Redux (pas idéal, mais remplit cette fonctionnalité).

Ajout de async à mon componentDidMount le long avec le wait attend de mettre à jour les données jusqu'à ce que l'état local ait changé, ce qui se reflète ensuite dans mon interface utilisateur.

Merci à tous pour votre aide.

import React, { Component } from 'react';
import { connect } from 'react-redux';
import CarCard from '../components/CarCard';
import CarForm from './CarForm';
import './Cars.css';
import { getCars } from '../actions/cars';
import { sortCar } from '../actions/cars';

Component.defaultProps = {
  cars: { cars: [] }
}

class Cars extends Component {
  constructor(props) {
  super(props)
  this.state = {
    cars: [],
    sortedCars: []
  };
}

sortAlphabetically = () => {
    console.log("sort button clicked")
    const newArray = [].concat(this.props.cars.cars)
    const orgArray = newArray.sort(function (a,b) {
          var nameA = a.name.toUpperCase();
          var nameB = b.name.toUpperCase();
              if (nameA < nameB) {
                return -1;
              } else if (nameA > nameB) {
                return 1;
              } 
               return 0;
              })  
            console.log(orgArray)
            this.props.sortCar(orgArray);
            this.setState({ cars: {cars: orgArray} })
}

async componentDidMount() {
    await this.props.getCars()
    this.setState({cars: this.props.cars})
}

render() {
    return (
    <div className="CarsContainer">
        <h3>Cars Container</h3> 
        <button onClick={this.sortAlphabetically}>Sort</button>
        {this.state.cars.cars && this.state.cars.cars.map(car => <CarCard key={car.id} car={car} />)}          
        <CarForm />
    </div>
    );
  }
}

 const mapStateToProps = (state) => {
  return ({
    cars: state.cars
  })
}

const mapDispatchToProps = (dispatch) => {
  return {
    sortCar: (cars) => dispatch(sortCar(cars)),
    getCars: (cars) => dispatch(getCars(cars))
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Cars);

Vous ne devez pas utiliser setState (). setState () ne modifie pas immédiatement this.state mais crée une transition d'état en attente. this.state après avoir appelé cette méthode peut potentiellement retourner la valeur existante. voici donc comment gérer le tri.

NOTEZ que par défaut, la méthode sort () trie les valeurs sous forme de chaînes par ordre alphabétique et croissant. donc vous n'avez pas besoin de définir de fonction de comparaison.

1-u peut définir une autre action et demander au réducteur de gérer le tri. la chose est ici, vous devez vous assurer que vous ne modifiez pas l'état, utilisez donc slice ()

const mapStateToProps = (state) => {
  return ({
    cars: state.cars.sort()
  })
}

2- vous pouvez définir une fonction et passer l'état en arguments et retourner l'état trié.

case 'SORT_CARS':
  return state.slice().sort()