如何在useSelector()中对数组进行排序，而无需无限次重新渲染

Question

在我正在进行的课程中，我正试图使用useSelector()作为Redux的一部分来呈现一个经过排序的轶事列表。

每次我试图从州政府获得轶事时，我总是会遇到这样的错误：Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.，它使应用程序无限地重新发送。

const dispatch = useDispatch()
const anecdotes = useSelector(({ anecdotes }) => {
return anecdotes.sort((a, b) => {
return b.votes - a.votes
})
})
const vote = (id) => {
dispatch(voteAnecdote(id))
}
return(
<div>
{anecdotes.map(anecdote =>
<Anecdote
key={anecdote.id}
anecdote={anecdote}
handleClick={vote(anecdote.id)} />
)}
</div>
)

Answer 1

您在每次渲染时都要调度一个操作，只有在单击时才能调用vote：

以下是如何实现这一点(只需创建一个在点击时调用投票的函数(：

return(
<div>
{anecdotes.map(anecdote =>
<Anecdote
key={anecdote.id}
anecdote={anecdote}
handleClick={() => vote(anecdote.id)} />
)}
</div>
)

另一个注意事项：

当您使用sort时，您会在状态下更改阵列

你试过这个吗：

const anecdotes = useSelector(({ anecdotes }) => {
return [...anecdotes].sort((a, b) => {
return b.votes - a.votes
})
})

这将为阵列创建一个新的参考

Answer 2

要么在存储中对其进行排序(在保存之前对其排序(，要么在useSelector调用之后对其进行分类(它将具有与当前实现相同的性能和效果，但没有转发器(