[英]react hook useEffect infinite loop
Below is my code snipet.下面是我的代码片段。 When i receieve my prop and try to useSate, i recieve this infine loop even after following number of solutions.
当我收到我的 prop 并尝试使用 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;
The issue is that you are defining position array in functional component and its reference gets changed on each re-render and hence the useEffect executed again.问题是您在功能组件中定义 position 数组,并且它的引用在每次重新渲染时都会更改,因此 useEffect 再次执行。
You can move declaration of position out of component since its a constant like您可以将 position 的声明移出组件,因为它是一个常量
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;
or remove the dependency of position
from useEffect或者从 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;
remove the dependency of position from useEffect从 useEffect 中移除 position 的依赖
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.