调用次数过多时，useEffect 调用将停止工作。为什么？

Question

我有一个 useEffect，当这样做时它可以正常工作。

    async function readUserPosts(profileID){
        try {
            const res = await axios.post(...);
            setUserPosts(res.data.posts);
        } catch (err) {
            console.error(err);
        }
    }

    useEffect(() => {
        readUserPosts(profileID);   
    }, [profileID])

但是，如果我通过添加这样的第二个函数来定义相同的 useEffect：

    async function readUserPosts(profileID){
        try {
            const res = await axios.post(...);
            setUserPosts(res.data.posts);
        } catch (err) {
            console.error(err);
        }
    }

    useEffect(() => {
        readUserPosts(profileID);
        functionX();
    }, [profileID])

useEffect 在我重新加载页面的前几次工作，之后它停止工作。我没有收到任何错误消息，即使我将 try catch 包装在 2 个函数周围也是如此。 FunctionX 是一个简单的异步函数。我在 functionX 上替换了其他测试函数，它产生了相同的结果。所以基本上，当定义第二个函数时它不会起作用。出了什么问题？

Answer 1

用useCallback 封装这两个方法。例如，这是一种方法：

const readUserPosts = useCallback(async function() {
  try {
        const res = await axios.post(...);
        setUserPosts(res.data.posts);
    } catch (err) {
        console.error(err);
    }
 }, []);

并尝试像这样添加依赖项：

useEffect(() => {
    readUserPosts(profileID);
    functionX();
}, [profileID, readUserPosts, functionX])

调用次数过多时，useEffect 调用将停止工作。为什么？

useEffect calls stop working when called too many times. Why?

javascript

reactjs

mern