Question

下面是我的代码片段。当我收到我的道具并尝试使用Sate时，即使经过以下数量的解决方案，我仍会收到此infine循环。

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;

Answer 1

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

反应钩子使用效果无限循环

1 个答案: