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