Estoy creando una lista plana que genera una matriz de objetos desde una API. Antes de generar la matriz, se ordenará alfabéticamente y se agregarán otros datos en la parte superior de la matriz. El problema es que los datos no se ordenan cuando se representan en la lista plana y faltan los nuevos datos que se agregaron.
const defaultListTab = {id: 18, name: "All"}; const [listTab, setListTab] = React.useState([]); .then(function (result) { setListTab(result.data.categoriesData) listTab.sort(function (a, b){ if(a.name.toLowerCase() < b.name.toLowerCase()) { return -1; } else if(a.name.toLowerCase() > b.name.toLowerCase()) { return 1; } return 0; }); setListTab(listTab => [defaultListTab, ...listTab]) )}; return () => abortCont.abort();Así es como se ve la matriz originalmente:
Array [ Object { "id": 29, "name": "Fruit", }, Object { "id": 30, "name": "Vegetable", }, Object { "id": 31, "name": "Dessert", } ]En su primera llamada a setListTab , está configurando el estado en result.data.categoriesData .
Luego, está tratando de ordenar listTab , pero en este momento, el estado aún está vacío [] , porque la reacción aún no lo ha procesado.
Ordene los resultados de su solicitud antes, luego establezca el estado.
Algo como esto:
result.data.categoriesData.sort()... setListTab([defaultListTab, ...result.data.categoriesData]);el problema es que listTab no se actualiza instantáneamente porque setListTab es una operación asíncrona
cambia tu código así
const defaultListTab = {id: 18, name: "All"}; const [listTab, setListTab] = React.useState([]); .then(function (result) { setListTab(result.data.categoriesData) setListTab(listTab => { listTab.sort(function (a, b){ if(a.name.toLowerCase() < b.name.toLowerCase()) { return -1; } else if(a.name.toLowerCase() > b.name.toLowerCase()) { return 1; } return 0; }); return [defaultListTab, ...listTab] })cuando usa una devolución de llamada dentro de su función setState, obtendrá el valor actualizado