只有在react js中第一次加载页面时才更新状态变量

Question

我有一个react组件，我想在第一次加载页面时将状态变量更新为false。我使用的是useEffect，但后来我使用的第三方库调用了一个函数，该函数具有更新相同状态变量为true的函数，这正是我想要的，但它再次运行useEffect使其返回false。

因此，我想确保当我们加载/刷新页面时，状态变量仅为false

useEffect(() => {
Dosomething();
DoAnotherThing();
changeState();
}[Dosomething,DoAnotherThing,changeState]);
return (
<>
<ThirdPartyComponent>
//on Load dispatches another function
AnotherFunction();
</ThirdPartyComponent>
</>
)

行动

AnotherFunction(){
changeState(); //I want the state change to happen here but it calls the useEffect back again which makes it false
}

所以，我试图确保状态变量只有在页面加载/刷新时才为false。我正在使用Redux进行状态管理

Answer 1

每次重新渲染组件时都会触发useEffect，如果您希望它仅在组件安装时运行，则应使用带有空数组的useEffect作为第二个参数。

useEffect(() => {//stuff},[])

如果您想运行一个效果并只清理一次(在装载和卸载时(，可以传递一个空数组([](作为第二个参数。这告诉React，你的效果不依赖于道具或状态的任何值，所以它永远不需要重新运行。这并不是一种特殊情况——它直接来自于依赖项数组的工作方式。

此处为

Answer 2

传递一个空白数组作为useEffect的第二个参数。

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