为什么在按钮单击时没有反应重新渲染页面？

Question

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)
 }

The log is displayed in the console sorted array, but the page is not re-renderer.

<SortButton button={sortCity} text="по городу" />
<SortButton button={sortCompany} text="по компании"/>

I think that the problem is in setState, but I don't understand how to implement it

Answer 1

.sort array method mutates the state and you should avoid this. You cannot mutate anything in React, because it is not able to re-render. You should set the new state directly.

In your case you should create a new array, sort it, and set into your state:

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);
}