React Maximum update depth exceeded 错误场景 及解决方法

• 业务重复渲染

//store.xxxx 默认为 null, 数据需通过接口获取 有一点延迟
const dd = store.xxxx ?? []; // (store 使用的 mobx store)
// 类似于这样 const dd = [];  // one of the dependencies changes on every render.
const [yyy, setYyy] = useState();

// 这个 effect 依赖 dd
useEffect(() => {
  console.log(dd);
  setYyy(****); //触发组件刷新 重新获取 dd 依然是 null 转 默认 [], 触发 该 effect 反复触发
},[dd])

这种场景会触发无限循环更新 react-dom.development.js:86 Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.

• 修改

// dd 干掉
//const dd = store.xxxx ?? []; // (store 使用的 mobx store)
// 类似于这样 const dd = [];  // one of the dependencies changes on every render.
const [yyy, setYyy] = useState();

// 这个 effect 依赖 dd
useEffect(() => {
  const dd = store.xxxx
  console.log(dd);
  setYyy(****); //触发组件刷新 重新获取 dd 依然是 null 转 默认 [], 触发 该 effect 反复触发
},[store.xxxx ])