时间戳

首页 > 解决方案 > 对依赖变化执行useEffect的回调函数的不同代码

reactjs - 对依赖变化执行useEffect的回调函数的不同代码

问题描述

一个函数 fetchData() 在组件加载时被调用，并且当这个组件的 testA 和 testB 属性发生变化时也会被调用。而且当只有 testA 道具发生变化时，我想执行状态更新。现在，当 testA 和 testB 发生变化时，状态更新正在发生。

useEffect(()=>{
   fetchData();
   // Only When testA changes I want to update the below state.
   // setTableData([]);
},[testA, testB]);

如果我使用 2 useEffect 我将在初始渲染时调用 fetchData 两次。这是不可接受的。

useEffect(()=>{
   fetchData();
   setTableData([]);
},[testA]);

useEffect(()=>{
   fetchData();
},[testB]);

如何使用钩子实现此功能？

标签： reactjsreact-hooksuse-effect

解决方案

您可以在调用之前向其中一个钩子添加测试，fetchData以查看您是否在初始渲染中。例如，如果fetchData更新某个data状态，您可以data从 undefined 开始并执行以下操作：

useEffect(()=>{
   fetchData();
   setTableData([]);
},[testA]);

useEffect(()=>{
   if (data) {
       // then we're not on the initial render
       fetchData();
   }
},[testB]);

或者你可以用不同的状态变量做同样的事情，它的内容可以用来确定你是否在初始渲染上——它不必是data.

推荐阅读