useEffect 调用在调用次数过多时停止工作。为什么？-解网

问：

我有一个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 上替换了其他测试函数，它产生了相同的结果。所以基本上，当定义第二个函数时，它将不起作用。哪里出了问题？

JavaScript reactjs mern

很难举个例子，当我console.logonuseEffect时，我什么也没得到。但是，我将详细描述：因此，此处的 profileID 是从 useParams 中获取的，因此，如果我单击其他记录，profileID 会更改，并呈现为不同的配置文件。当我单击不同的记录时，它可以正常工作并正确调用 2 个函数，但是当我不断更改用户 ID 时，它会突然停止工作。

0赞 FiFi 4/26/2022

尽管useEffect有效，但当我内部只有1个函数时。

答：

1赞 Md Wahidul Azam 4/26/2022 #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?

评论

评论