React + Redux - 在商店更改时更新本地状态 => 无限循环

Question

我有一个存储在存储中的数组，我们称它为 users，我有一个自定义挂钩可以从存储中检索它（通过 useSelector）。基于商店中的这个数组，我的组件中有一个本地状态，用作 table 的显示源。我需要在本地状态下单独拥有它，因为我根据搜索功能过滤数据。

我想做的是，每当商店中的数据发生变化时，我也想更新本地状态以反映这些变化（但事先调用它之上的过滤功能）。

然而，这会导致无限循环，因为 useEffect + setState 会导致重绘，从而再次更改存储变量等。

const users = useUsers() // uses redux store
const [displayUsers, setDisplayUsers] = useState(users) // local state

useEffect(() => {
   const filteredUsers = onSearch(users) // applies the filtering
   setDisplayUsers(filteredUsers) // updates the local state
}, [users])

return <Table source={displayUsers} ... />

有人可以帮忙吗？

Answer 1

由于displayUsers是从props派生出来的，所以不需要在state里维护。每当 props 发生变化时即时计算，如果由于其他原因经常渲染组件，请使用 memo：

const users = useUsers() // uses redux store

const displayUsers = useMemo(() => onSearch(users), [onSearch, users])

return <Table source={displayUsers} ... />

如果您确实需要在商店更改时设置状态，请确保选择器已记忆 - 即，如果没有任何更改，您将获得相同的数组。因此，当重新渲染组件时，选择器将 return 相同的 users 数组，这将防止再次调用 useEffect。

您可以使用 equalityFn（第二个参数）调用 useSelector，以避免在没有任何变化的情况下 return 获取新值 (see Equality Comparisons and Updates)。这是文档中的示例：

import { shallowEqual, useSelector } from 'react-redux'

const selectedData = useSelector(selectorReturningObject, shallowEqual)

React + Redux - 在商店更改时更新本地状态 => 无限循环

React + Redux - Update local state on store change => infinity loop

infinite-loop

reactjs

redux

react-hooks

react-state