ReactJS 传入空依赖的useEffect仍反复触发问题求助

空依赖数组的useEffect仅会在组件首次挂载时执行，后续组件重渲染不会重复触发。你遇到的重复执行问题，唯一原因是 Dashboard 组件在每次点击Product按钮后，被React判定为新组件，触发了卸载-重新挂载流程。
常见触发场景为上层组件的错误写法：

1. 上层包裹cartContext.Provider的组件状态更新时，以匿名函数/动态创建的形式渲染Dashboard，比如React Router v5错误写为<Route path="/dashboard" component={() => <Dashboard />} />，每次渲染都会生成新的组件类型，React会直接卸载旧组件挂载新组件
2. 给Dashboard组件传入了动态变化的key属性，每次父组件渲染key值更新，触发组件卸载重挂

• 修正上层组件的Dashboard渲染逻辑
  • 不要用匿名函数包裹Dashboard渲染，路由场景下React Router v5写为component={Dashboard}，非路由场景不要把Dashboard定义在其他组件内部，避免每次渲染生成新的组件实例
  • 检查Dashboard的key属性，确保为固定值，或和组件身份绑定的稳定唯一值
• 优化Dashboard内的事件绑定写法（同时修复隐藏的分页闭包bug）
  你当前通过原生addEventListener绑定按钮点击事件属于冗余写法，还会因为闭包问题导致后续分页请求拿不到最新的firstKey、lastKey状态，直接改用React内置的事件绑定即可：

// Dashboard的return部分修改为
return (
  <div>
    <h2>Dashboard</h2>
    {defaults.map(product => {
        return (<Product key={product.id} product={{ id: product.id, amount: product.amount, name: product.productName }} />)
    })}
    {/* 直接绑定onClick，无需手动清理事件 */}
    <button onClick={nextButtonListener} id="nextButton">Next</button>
    <button onClick={previousButtonListener} id="previousButton">Previous</button>
  </div>
)

对应修改useEffect，移除事件绑定逻辑，仅保留首次加载逻辑：

useEffect(() => {
  console.log('Called')
  firstPageLoad()
}, [])

内容的提问来源于stack exchange，提问作者D_Gamer