为什么调用一个setState会更新另一个完全独立的React state状态值？

Array.prototype.sort() 是原地排序方法，会直接修改调用它的原数组，而非返回新的排序后数组。

你的代码中排序逻辑的执行顺序是：

1. 先执行 unsortedData.sort()，直接修改了 unsortedData 对应的原数组（也就是你存储原始顺序的state）
2. 才对已经排序后的数组做展开操作，赋值给 displayedData

这就是为什么两个独立state看起来出现了关联：你在给 displayedData 赋值前，就已经主动修改了 unsortedData 的值。

调整排序的执行顺序，先拷贝原数组，再对拷贝出来的新数组执行排序，不要触碰存储原始顺序的unsortedData：
把原有排序逻辑

setDisplayedData([...unsortedData.sort()])

修改为：

setDisplayedData([...unsortedData].sort())

调整后逻辑变为：

1. 先展开 unsortedData 得到一个全新的独立数组
2. 对这个新数组执行排序，完全不会影响到原unsortedData的内容
3. 排序后的新数组赋值给 displayedData，原始数据顺序得到保留。

内容的提问来源于stack exchange，提问作者Hombre Lobo