reactjs 请报告:挂起的回调数过多:在useEffect内部调用时为501

bcs8qyzn  于 2022-12-18  发布在  React
关注(0)|答案(1)|浏览(139)

我正在使用ReactJS,还原,React-还原,还原-Thunk。
文件:首页下面是我的Redux Action函数:

export function setSuccess(data){
    return{
        type: "SET_SUCCESS",
        payload: data
    };
}

export function setMessage(data){
    return{
        type: "SET_POSTS",
        payload: data
    };
}

export const listMyBlogPosts = (userID, abortController) =>{

    return (dispatch) =>{
        axios.get(`http://locahost:5000/timeline/posts/${userID}`, {signal: abortController})
            .then((response) =>{
                dispatch(setSuccess(true));
                dispatch(setMessage(response.data.message));

            }).catch((error) =>{
                console.log("err: ", error);
                dispatch(setSuccess(false));
                dispatch(setMessage(`${error}`));
            });
    }

};

下面是我使用上述函数的地方:
文件名:ABC.js:

function ABC({ someCheck }){
    const abortController = useRef(new AbortController()); 
    const dispatch = useDispatch();
    console.log(“ABC component”);

    useEffect(() =>{
       
        navigation.addListener("focus", () =>{

            dispatch(listMyBlogPosts(userID, abortController.current.signal));
            
            console.log("focus is being run!");

        });

        return () => abortController.current.abort();

    }, []);   
    
}

在ABC组件中,我得到以下错误:

如果我删除useEffect钩子,我不会得到上面的错误?
如何修复此错误?

eufgjt7s

eufgjt7s1#

您的代码添加了越来越多的事件“焦点”监听器,这导致了大量的请求调用。因此,您需要在组件卸载后删除这些事件监听器。

useEffect(() => {
  const onFocus = () => {
    dispatch(listMyBlogPosts(userID, abortController.current.signal))
    console.log('focus is being run!')
  }
  navigation.addListener('focus', onFocus)

  return () => {
    navigation.removeListener('focus', onFocus)
    abortController.current.abort()
  }
}, [])

相关问题