useEffect 依赖警告答案

【问题标题】：useEffect dependency warninguseEffect 依赖警告
【发布时间】：2021-07-12 17:55:22
【问题描述】：

我正在开发一个 reactjs 网络应用程序。

这是我的代码源：

import React, { useContext, useState, useEffect } from "react";

...

function myPage() {
    async function myPageLoad() {
        ...
    }

    useEffect(() => { myPageLoad(); }, []);


    return (<div>My page content</div>);
}

export default myPage;

我希望在显示页面时调用 myPageLoad（初始化）。请注意，当我想刷新页面信息时，我也会调用此函数。

你能确认我 useEffect 是调用 myPageLoad 函数的好方法吗？还是有其他方法可以做到这一点？

它似乎有效，但我在运行时收到此警告：

React Hook useEffect 缺少一个依赖项：'myPageLoad'。任何一个包含它或删除依赖数组 react-hooks/exhaustive-deps

我尝试将 myPageLoad 放入依赖数组，但它不起作用。

有什么想法吗？

谢谢

【问题讨论】：

标签： reactjs react-native use-effect

【解决方案1】：

为此，您必须将 myPageLoad 函数更新为 useCallback 函数：

const myPageLoad = useCallback(async () => {
   ...
}, []);

useEffect(() => {
  myPageLoad();
}, [myPageLoad]);

这保证了 myPageLoad 函数标识是稳定的，不会在任何重新渲染时发生变化。

【讨论】：

感谢您的回答，但使用您的方法，例如，我无法通过单击按钮调用 myPageLoad()
当然可以！为什么你不能？

【解决方案2】：

这是最简单的解决方案

useEffect(() => { 
    async function myPageLoad() {
        ...
    }
    myPageLoad()
 }, []);

【讨论】：

谢谢，但无法从外部调用 myPageLoad（例如，当我单击按钮时）