react hook useEffect 无限循环答案

【问题标题】：react hook useEffect infinite loopreact hook useEffect 无限循环
【发布时间】：2020-09-06 10:32:49
【问题描述】：

以下是我的代码片段。当我收到我的道具并尝试使用 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(() => { // this is only executed once }, [])

标签： reactjs react-hooks use-effect

【解决方案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;

【讨论】：

这是正确的，我刚刚意识到我的问题出在正在消耗的子组件上，这与 useEffect 中的间隔有关