我正在开发一个 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 放在依赖数组中,但它不起作用。
有什么想法吗?
谢谢
答案 0 :(得分:1)
为此,您必须将 myPageLoad 函数更新为 useCallback
函数:
const myPageLoad = useCallback(async () => {
...
}, []);
useEffect(() => {
myPageLoad();
}, [myPageLoad]);
这保证了 myPageLoad 函数标识是稳定的,并且不会在任何重新渲染时发生变化。
答案 1 :(得分:0)
这是最简单的解决方案
useEffect(() => {
async function myPageLoad() {
...
}
myPageLoad()
}, []);