为什么在将redux状态作为依赖项添加到`useEffect`挂钩时会导致应用程序启动时出现无限循环？

Question

我有一个相当复杂的React Native应用程序，这使得很难提供博览会零食或类似的东西，所以我尽力解释我面临的问题：

该应用程序的一个功能是我拥有一组伪数据，用户可以查询这些伪数据以将其添加到他最喜欢的列表中。通过使用Autocomplete文本输入组件，用户可以通过单击列表中的选项将新的收藏夹添加到列表中。然后应显示此新收藏夹项目。

收藏夹列表存储在redux存储中，并使用useEffect钩每分钟更新一次（出于样式原因）。

我面临的问题是我需要将收藏夹列表状态添加到useEffect钩子的依赖项中。但是，这样做时，我的应用程序无法启动，这似乎是由无限循环引起的（即使我没有收到任何警告或错误消息）：

收藏夹列表组件

const curFavorites = useSelector(state => state.userData.favorites);

//This dispatch is used to update data in a favorite item inside the `useEffect` hook
const dispatch = useDispatch();
const updateStyling = useCallback((id, attr, value) => {
    dispatch(updateFavorites(id, attr, value))
}, [dispatch]);

//The useEffect that does not fire
useEffect(() => {
    console.log('test')
    updateStyling(id, attr1, "favorite1")
}, [props.minuteCounter, curFavorites ])

将curFavorites添加到依赖项时，该应用程序无法启动，并且上述console.log()无法运行。

---

Reducer处理收藏夹的初始化和插入

import { INSERT_FAVORITES } from "../actions/userActions";
import { FAVORITES } from "../../data/favoritesData";

// Initial state when app launches
const initState = {
    favorites: FAVORITES
};

const userReducer = (state = initState, action) => {
    switch (action.type) {
        case INSERT_FAVORITES:
            return {
                ...state,
                favorites: [
                    ...state.favorites,
                    action.newFavorite
                ]
            }
        default:
            return state;
    }
};

export default userReducer;

我在这里想念什么？在将curFavorites作为依赖项添加到useEffect挂钩中时，为什么初始化应用程序时会出现无限循环？

Answer 1

您需要在useEffect挂钩中使用一个updateStyling函数。

    updateStyling = useCallback((id, attr, value) => {
    dispatch(updateFavorites(id, attr, value))
}, [dispatch]); ```

Answer 2

您正在更新userReducer（）内部的状态，并且已将相同状态作为依赖关系传递给useEffect（）。

每当依赖项发生变化时，

useEffect（）钩子调用每次。您不应将状态用作依赖项，因为它会导致无限循环