时间戳

首页 > 解决方案 > react hook useEffect 无限循环

reactjs - react hook useEffect 无限循环

问题描述

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

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;

标签： reactjsreact-hooksuse-effect

解决方案

问题是您在功能组件中定义位置数组，并且它的引用在每次重新渲染时都会更改，因此 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;

或者position从 useEffect中移除依赖

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;

推荐阅读