创建基于对象的状态导致 useEffect 在挂载时触发

Question

我正在建立一个这样的状态：

 const today = new Date();
const year = today.getFullYear();
const month = String(today.getMonth() + 1).padStart(2, '0');
const day = String(today.getDate()).padStart(2, '0');
const formattedDate = `${year}-${month}-${day}`;
const [selectedDateRange, setSelectedDateRange] = useState({startDay: formattedDate, endDay:formattedDate});

如果

selectedDateRange

发生变化，我想要一个 useEffect 来检测并重新获取相关数据，如下所示：

  useEffect(()=>{
  fetchPerformanceData();
}, [selectedDateRange])

但是，我注意到每次刷新页面或某种重新渲染触发器时，上面的 useEffect 都会被触发（我显然不知道为什么）。任何见解都会非常有帮助！

Answer 1

在依赖项中使用对象或数组会导致这种情况。您可以使用 stringify 或通过列出需要运行此效果的日期范围内的实际字段来比较 selectedDateRange 的

values

。

useEffect(()=>{
  fetchPerformanceData();
}, [JSON.stringify(selectedDateRange)])