React Hook 组件在导入的数组更改时不会更新

Question

我在usersList.js文件中有一些模拟数据。我还创建了一个服务来将用户添加到此数组。但是负责呈现此数据的组件只呈现一次。用户列表中发生的任何更改都不会影响重新呈现。

我尝试使用useEffect，但它没有帮助。只有强制更新才能重新渲染它，但我对这个解决方案不满意。

用户列表.js

const usersList = [{...}]
export default usersList

Answer 1

用户列表中发生的任何更改都不会影响重新呈现。

这是因为如果你使用 usersList 作为 React 状态并修改usersList，你就违反了 React 的基本规则之一。不能直接修改状态数组/对象。

相反，您可以通过 useState返回的 setter 函数替换状态中的数组/对象(或在类组件中，通过 setState (。

如果这一切都发生在组件外部，则需要让某些内容通知组件事情已更改，以便组件可以更新其状态。这可能是使用上下文或其他内容，但从根本上说，组件需要知道它需要更新其状态。