意外的获取数据挂钩行为

Question

我正在学习如何使用钩子获取数据。在我的迷你项目中，我创建了一个自定义挂钩来获取和返回数据。在我的组件中，我创建了 2 个不同的状态来存储来自获取的数据的 2 个列表，并将它们呈现在屏幕上。

预期结果：当我从用户列表中单击名称时，它将将此用户移动到代表列表。当我点击重置时，两个列表都应该恢复到原始状态。

实际结果：Console.log显示每次点击名字都会修改原始数据。因此我无法重置列表。我无法解释为什么 useFetchData 中的状态会随着组件状态的变化而变化。

我错过了什么？谢谢！ CodeSandbox

Answer 1

我发现了问题。我以为这是一个钩子问题，结果是我对传播运算符缺乏了解。阅读文档后，我现在知道传播操作仅复制数组或对象的第一层。如果数组或对象是多维的，展开运算符将不起作用。这就是钩子状态发生变化的原因。