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



下面是我的代码狙击手。 当我收到我的道具并尝试使用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;

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

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 中删除位置的依赖关系

相关内容

  • 没有找到相关文章

最新更新