react hook useEffect 无限循环

react hook useEffect infinite loop

下面是我的代码片段。 当我收到我的财产并尝试使用状态时,即使在以下解决方案数量之后,我也会收到这个无限循环。

const App = ({ center }) => {
  const position = [-1.29008, 36.81987];

  const [mapCenter, setMapCenter] = useState();

  useEffect(() => {
    if (center && center.length > 0) setMapCenter(center);
    else setMapCenter(position);
  }, [center, position]);


return (<div> </div>)

}

export default App;

问题是您在功能组件中定义位置数组,并且它的引用在每次重新渲染时都会更改,因此 useEffect 会再次执行。

您可以将位置声明移出组件,因为它是一个常量,例如

const position = [-1.29008, 36.81987];
const App = ({ center }) => {


  const [mapCenter, setMapCenter] = useState();

  useEffect(() => {
    if (center && center.length > 0) setMapCenter(center);
    else setMapCenter(position);
  }, [center, position]);


return (<div> </div>)

}

export default App;

或者移除useEffect

position的依赖
const App = ({ center }) => {
  const position = [-1.29008, 36.81987];

  const [mapCenter, setMapCenter] = useState();

  useEffect(() => {
    if (center && center.length > 0) setMapCenter(center);
    else setMapCenter(position);
  }, [center]);


return (<div> </div>)

}

export default App;

去掉useEffect对position的依赖