function App() { const [users,setUsers] = useState([]) useAsyncEffect(async () => { const res = await fetch('https://jsonplaceholder.typicode.com/users') const data = await res.json() setUsers(data) }, []) console.log(users) function sortCity () { users.sort((x,y) => { if(x.address.city < y.address.city) {return -1} if(x.address.city > y.address.city) {return 1} return 0 }) console.log(users) } function sortCompany () { users.sort((x,y) => { if(x.company.name < y.company.name) {return -1} if(x.company.name > y.company.name) {return 1} return 0 }) console.log(users) } <SortButton button={sortCity} text="по городу" /> <SortButton button={sortCompany} text="по компании"/>Se muestran los registros de la consola, pero no se vuelven a procesar.
El método de matriz .sort muta el estado y debe evitar esto. No puedes mutar nada en React, porque no se puede volver a renderizar. Debe establecer el nuevo estado directamente.
En su caso, debe crear una nueva matriz, ordenarla y configurarla en su estado:
function sortCompany () { const sortedUsers = [...users] sortedUsers.sort((x,y) => { if(x.company.name < y.company.name) {return -1} if(x.company.name > y.company.name) {return 1} return 0 }) setUsers(sortedUsers); }