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

Question

我在usersList.js文件中有一些模拟数据。 我还创建了一项服务，以将用户添加到该阵列。 但是负责渲染此数据的组件仅渲染一次。 usersList中发生的任何更改都不会影响重新渲染。

我尝试使用useEffect，但没有帮助。 只有强制更新可以重新呈现它，但是我对这种解决方案不满意。

userList.js

const usersList = [{...}]

export default usersList

Answer 1

  

usersList中发生的任何更改都不会影响重新渲染。

那是因为如果您使用usersList作为React状态并修改 usersList，那么您就是breaking one of the fundamental React rules。您不能直接修改状态数组/对象。

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

如果这一切都是在组件外部发生的，则需要让某些东西通知组件发生了更改，以便组件可以更新其状态。可能正在使用context或其他方式，但是从根本上说，组件需要知道它需要更新其状态。