Question

当我尝试调度从状态中获取所有最新帖子的动作时，它陷入无限循环。

我在useEffect依赖项数组中尝试了以下方法

Object.values(statePosts)
useDeepCompare(statePosts)
通过dispatch
省略dispatch
省略statePosts
通过statePosts
在useCallback中做同样的事情

很多建议来自here

我已验证数据在我的redux存储中正确更新。

我不知道为什么这种情况仍在发生

我的组件

  const dispatch = useDispatch()
  const { user } = useSelector((state) => state.user)
  const { logs: statePosts } = useSelector((state) => state.actionPosts)

  const useDeepCompare = (value) => {
    const ref = useRef()
    if (!_.isEqual(ref.current, value)) {
      ref.current = value
    }
    return ref.current
  }

  useEffect(() => {
    dispatch(getActionLogsRest(user.email))
  }, [user, dispatch, useDeepCompare(stateLogs)])

actionPosts createSlice

const slice = createSlice({
  name: 'actionPosts',

  initialState: {
    posts: [],
  },
  reducers: {
    postsLoading: (state, { payload }) => {
      if (state.loading === 'idle') {
        state.loading = 'pending'
      }
    },
    postsReceived: (state, { payload }) => {
      state.posts = payload
    },
  },
})

export default slice.reducer

const { postsReceived, postsLoading } = slice.actions

export const getActionPostsRest = (email) => async (dispatch) => {
  try {
    dispatch(postsLoading())
    const { data } = await getUserActionPostsByUser({ email })
    dispatch(postsReceived(data.userActionPostsByUser))
    return data.userActionPostsByUser
  } catch (error) {
    throw new Error(error.message)
  }
}

Answer 1

从依赖项中删除调度。

 useEffect(() => {
    dispatch(getActionLogsRest(user.email))
  }, [user, dispatch, useDeepCompare(stateLogs)])

您不能使用钩子作为依赖项，顺便说一句，ref.current在这里始终未定义

const useDeepCompare = (value) => {
    const ref = useRef()
    if (!_.isEqual(ref.current, value)) {
      ref.current = value
    }
    return ref.current
  }

因为useDeepCompare本质上是您在每次调用时（与ref一起）初始化的一个函数，所以它所做的只是返回value。这就是循环开始的地方。

useEffect无限循环与Redux分派上的依赖项数组

1 个答案: