React redux reducer，因为UseEffect依赖导致无限循环
React redux reducer，因为UseEffect依赖导致无限循环
提问于 2021-02-28 06:28:41
我只是深入研究react。但是useEffect react钩子还是把我搞糊涂了。我知道我可以将依赖项作为数组传递给它，以控制组件的呈现。我已经使用道具和本地状态来做，它是有效的。
让我感到困惑的是，当我将redux reducer作为依赖项传递时，它会导致呈现组件的无限循环。
// users组件
const usersComp = () => {
const users = useSelector(state => state.users);
useEffect(
// fetch users and update users state
useDispatch().dispatch(getUsers)
,[users]) // <-- causes an infinite loop!!
if(users.length){
return( users.map(user => {user}))
}}
// getUsers Redux Thunk函数
export async function getUsers(dispatch, getState) {
fetch(endpoint)
.then(response => response.json())
.then(users => {
dispatch({type: GET_USERS, payload: users})
}).catch(err => console.error("Error: ", err));}
//用户减少器
export default function usersReducer(state = [], action) {
switch (action.type) {
case GET_USERS : {
return [...state, action.payload]
}
}
}据我所知，用户一开始是一个空数组，然后被API调用的数据填充。因此，useEffect应该触发两次；一次是在组件刚刚挂载的时候，另一次是在用户的状态从API调用发生变化的时候。那么是什么导致了无限循环呢？
Stack Overflow用户
回答已采纳
发布于 2021-02-28 06:31:27
删除
从
依赖项，因为您希望在组件挂载时获取用户，而不是
每次
the the the
是改变的。
useEffect(
useDispatch().dispatch(getUsers)
,[]) // Now, it will fetch users ONLY ONCE when component is mounted解释：
// Case 1
useEffect(() => {
console.log("Mounted") // printed only once when component is mounted
}, [])
// Case 2
useEffect(() => {
console.log("users changed") // printed each time when users is changed
}, [users])所以，如果你这样做了
在
案例2
，它将
改变
这将重新触发钩子，该钩子将
用户再次更改了
并使钩子重新触发->这是一个
无限循环
..。
更新：
为什么
是否正在发生更改(在此代码中)，由
，即使
是否“相同”(相同的值)？
无论何时
操作已调度，reducer返回
新的
状态(
的值时，它也会这样做。
拥有相同的用户值。这就是为什么
接收
新的
用户数组。(他们做浅显的比较)。
请注意，
即
返回false。
如果出于某种原因，您想要返回
相同
redux状态，执行
在减速机里。这通常是我们在
案例
减速机。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66404040
复制相关文章
相似问题
腾讯云开发者
