Question

这是我的组件：

const Inscriptions = () => {

    // get state
    const { inscriptions, loading } = useSelector( state => state.user );

    // flag
    const instances = Object.keys(inscriptions).length;
    
    // dispatch
    const dispatch = useDispatch();

    const getInscriptions = useCallback(
        () => dispatch( getInscriptionsAction() ),
        [ dispatch ]
    );
    const cancel = id => dispatch( cancelInscriptionAction(id) );
    const cancelAll = () => dispatch( cancelAllInscriptionAction() );

    useEffect( () => {
            const queryToApi = () => {
                getInscriptions();  
            };
    
            queryToApi();
    }, [ getInscriptions ]);

    if(loading) return null;
    
    // delete item
    const handleClickCancel = id => {...};

    const handleClickCancelAll = () => {...};

    return ( ... );
}
 
export default Inscriptions;

这里是减速器：

case GET_USER_INSCRIPTIONS:
            return {
                ...state,
                error: false,
                loading: true
            };

        case GET_USER_INSCRIPTIONS_SUCCESS:
            return {
                ...state,
                error: false,
                loading: false,
                inscriptions: action.payload
            };                                  

        case GET_USER_INSCRIPTIONS_FAIL:
            return {
                ...state,
                error: true,
                loading: false, 
                inscriptions: []
            };

我的问题是，我有另一个具有相同逻辑的组件，但是该组件进入了无限循环。查找我的Redux开发工具，我看到它永久调用“ GET_USER_INSCRIPTIONS”操作，我不知道为什么它一次不调用它，就像我错过了后台发生的事情，但是其他组件却没有不会发生，它会加载，并且一旦加载为假（成功操作完成时），它就会加载。

我已经尝试过像这样在减速器中添加标志布尔的解决方案：

case GET_USER_INSCRIPTIONS:
            return {
                ...state,
                error: false,
                loading: true,
                flag: false
            };

        case GET_USER_INSCRIPTIONS_SUCCESS:
            return {
                ...state,
                error: false,
                loading: false,
                flag: true,
                inscriptions: action.payload
            };                                  

        case GET_USER_INSCRIPTIONS_FAIL:
            return {
                ...state,
                error: true,
                loading: false, 
                flag: true,
                inscriptions: []
            };

然后将我的useEfect更改为：

useEffect( () => {
        if(!loading && !flag) {
            const queryToApi = () => {
                getInscriptions();  
            };
    
            queryToApi();
        }
        
    }, [ getInscriptions, loading, flag ]);

    if(loading) return null;

并且工作完美，但是我仍然想不到为什么我必须在此组件中执行此操作，而另一个在没有此功能的情况下却表现良好。如果有人可以看一下并给我启发，我非常感谢您。

Answer 1

每次调用GET_USER_INSCRIPTIONS_SUCCESS操作时，都会更改与组件的连接状态，并再次调用useEffect，因为依赖项已更改

修复

useEffect( () => {
    if(!loading && !flag) {
        const queryToApi = () => {
            getInscriptions();  
        };

        queryToApi();
    }
}, [ getInscriptions ]);

Answer 2

好了，我解决了，问题是我还有其他与Inscriptions无关的动作，它们共享同一个减速器，所以就是干扰了。我创建了一个专用的reducer来管理我的题词组件。似乎这是redux告诉您如何对您的模块进行模块化的方法。

如何停止无限循环？

2 个答案: