Question

0

268

Visualizações

React.js ordenar lista de componentes

Estoy tratando de actualizar para que cuando se haga clic en el botón, se ejecute la función sortCategories y se ordene la lista de componentes de CategoryRow , pero nada cambia y no hay errores en la consola.

 import React, { useEffect, useState} from 'react';
import './category.css';
import Header from "../Header";
import CategoryRow from "./CategoryRow";


// Clean empty categories
const filtered = window.CATEGORIES.filter(function(value, index, arr) {
 return value.labResults.length > 0;
});



export default function Category() {

 const [categories, setCategories] = useState(filtered)
 const [loading, setLoading] = useState(true)

 useEffect(() => {
 setLoading(false)
 }, []);

 const sortCategories = () => {
 // Order by issues
 categories.sort((a,b) => {
 return b.issues - a.issues;
 });
 setCategories(categories);
 }

 return (
 <>
 <Header></Header>
 <div className="order-button-row">
 <button className="btn btn-primary" onClick={ sortCategories }>Order by issues</button>
 </div>
 <div className="card shadow py-2 mb-2">
 <div className="card-body">
 {loading ? (
 <div className={'text-center'}>
 <span className="fa fa-spin fa-spinner fa-4x"></span>
 </div>

 ) : (
 <div className={'row'}>
 {categories.map(categoryInformation =>
 <CategoryRow key={categoryInformation.category.id}
 category={categoryInformation.category}
 issues={categoryInformation.issues}></CategoryRow>
 )}
 </div>
 )}
 </div>
 </div>
 </>
 )
}

almost 4 years ago · Santiago Trujillo

1 Respostas

Responde à pergunta

0

Responde à pergunta

Encontrar trabalhos remotos

Accepted Answer · 2022-09-30T14:03:16.320Z

Problema

En su códigocategories.sort hace una categories.sort en el lugar y cuando hace setCategories(categories) , React simplemente lo ignora ya que es la misma referencia de matriz que antes (sin cambio de referencia).

 categories.sort((a,b) => {
 return b.issues - a.issues;
});
setCategories(categories);

Solución 1

Haga una copia de las categorías y luego ordene y actualice el estado:

 const categoriesCopy = [...categories];
categoriesCopy.sort((a,b) => {
 return b.issues - a.issues;
});
setCategories(categoriesCopy);

Solución 2

Utilice la función de devolución de llamada de la función de establecimiento:

 setCategories(prevCategories => {
 const categoriesCopy = [...prevCategories];
 categoriesCopy.sort((a, b) => {
 return b.issues - a.issues;
 });
 return categoriesCopy;
});

0

268