useEffect 依赖警告

时间:2021-04-18 08:46:52

标签: reactjs react-native use-effect

我正在开发一个 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 放在依赖数组中,但它不起作用。

有什么想法吗?

谢谢

2 个答案:

答案 0 :(得分:1)

为此,您必须将 myPageLoad 函数更新为 useCallback 函数:

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

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

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

答案 1 :(得分:0)

这是最简单的解决方案

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