react hook useEffect 無限循環

Question

下面是我的代碼片段。 當我收到我的 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;

Answer 1

問題是您在功能組件中定義 position 數組，並且它的引用在每次重新渲染時都會更改，因此 useEffect 再次執行。

您可以將 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;

或者從 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;

Answer 2

從 useEffect 中移除 position 的依賴