时间戳

首页 > 解决方案 > 为什么将 redux 状态作为依赖项添加到“useEffect”挂钩时会导致应用启动时出现无限循环？

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

问题描述

我有一个相当复杂的 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

标签： reactjsreact-nativereduxreact-hooks

解决方案

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

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

推荐阅读