tengo 2 componentes Uno es el componente App y el otro es el componente NumbersList . NumbersList es un componente secundario del componente App . El componente de la App recibe una lista de números llamada lst como accesorio. El componente de la App tiene 2 botones de clasificación Ascendente y Descendente e intentan hacer lo que su nombre implica.
El componente de la aplicación:
import React, { useState } from 'react'; import './style.css'; import NumbersList from './NumbersList'; export default function App({ lst }) { const [sortedLst, setSortedLst] = useState(lst); function sortAscHandler() { setSortedLst((prev) => prev.sort((a, b) => a - b)); } function sortDescHandler() { setSortedLst((prev) => prev.sort((a, b) => b - a)); } return ( <div> <button onClick={sortAscHandler}>Sort Ascending</button> <button onClick={sortDescHandler}>Sort Descending</button> <NumbersList lst={sortedLst} /> </div> ); }El componente NumbersList:
import React from 'react'; const NumbersList = ({ lst }) => { return ( <ul> {lst.map((num) => ( <li>{num}</li> ))} </ul> ); }; export default NumbersList;El archivo index.js principal:
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; const lst = [4, 3, 2, 1, 7, 6, 5, 100, 9, 8]; ReactDOM.render(<App lst={lst} />, document.getElementById('root'));El problema es que cuando se hace clic en los botones, sortedLst no se actualiza en la vista.
enlace de stackblitz: https://stackblitz.com/edit/react-jyqeuy?file=src%2Findex.js
Gracias de antemano
Array.prototype.sort es una ordenación in situ. En otras palabras, muta la matriz en la que opera y no devuelve una nueva referencia de matriz.
El método
sort()ordena los elementos de una matriz en su lugar y devuelve la matriz ordenada.
Primero haga una copia superficial, luego ordene la nueva referencia de matriz.
export default function App({ lst }) { const [sortedLst, setSortedLst] = useState(lst); function sortAscHandler() { setSortedLst((prev) => prev.slice().sort((a, b) => a - b)); } function sortDescHandler() { setSortedLst((prev) => prev.slice().sort((a, b) => b - a)); } return ( <div> <button onClick={sortAscHandler}>Sort Ascending</button> <button onClick={sortDescHandler}>Sort Descending</button> <NumbersList lst={sortedLst} /> </div> ); }