javascript - 如何停止无限循环？

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;

这是 reducer :

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”操作，我不知道为什么它不调用一次，就像我错过了后台发生的事情，但是其他组件没有't 发生，它加载，一旦加载为假(当 SUCCESS 操作完成时)它加载。
我已经尝试了一种向 reducer 添加标志 bool 的解决方案，如下所示:

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: []
            };

然后将我的 useEffect 更改为:

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 ]);