反應 useEffect 鈎子導致無限循環

Question

我的組件上有一個 useState 掛鈎，它看起來像這樣：

const [scoutMode, setScoutMode] = useState("camp");
const [bottomLinks, setBottomLinks] = useState([]);
useEffect(() => {
if (scoutMode == "weeklyProgramme") {
  setBottomLinks([
    {
      name: "Tasks",
      link: "/tasks"
  },
  {
    name: "Checklists",
    link: "/checklists"
  }
  
  ])
} else if (scoutMode == "camp") {
  setBottomLinks([
    {
      name: "Tasks",
      link: "/tasks"
  },
  {
    name: "Map",
    link: "/map"
  }
  ])
} else {
  setBottomLinks([]);
}
console.log(bottomLinks);
})

但是bottomLinks在控制台上連續打印，我有一個無限循環。 我記得有一條規則永遠不能在 useEffect 中調用 useState，我錯了，或者有人可以解釋我的代碼中發生了什么嗎？

Answer 1

問題：

當您在 useEffect 掛鈎中修改組件的 state 時，該組件將重新渲染，導致再次調用 useEffect； 從而進入無限循環。 這就是為什么你應該添加一個依賴數組作為 useEffect 的第二個參數，以便在依賴關系發生變化時調用 function。

解決方案：

添加一個依賴數組，如下所示：

const [scoutMode, setScoutMode] = useState("camp");
const [bottomLinks, setBottomLinks] = useState([]);
useEffect(() => {
if (scoutMode == "weeklyProgramme") {
  setBottomLinks([
    {
      name: "Tasks",
      link: "/tasks"
  },
  {
    name: "Checklists",
    link: "/checklists"
  }
  
  ])
} else if (scoutMode == "camp") {
  setBottomLinks([
    {
      name: "Tasks",
      link: "/tasks"
  },
  {
    name: "Map",
    link: "/map"
  }
  ])
} else {
  setBottomLinks([]);
}
console.log(bottomLinks);
}, [scoutMode])

Answer 2

您必須使用依賴項來使用效果 function 知道是否重新渲染，通常語法為

useEffect(() => {
  // code
}, [denpendencies])

在您的情況下，如果您只運行一次，則必須通過 [] 放置依賴項。 否則，如果您希望 useEffect 運行每個scoutMode更改，您可以通過 [scoutMode] 放置依賴項

Answer 3

1. 它首先在渲染發生時起作用。 useEffect(() => {... }, [])

2. 只要 scoutMode 的 state 更改 useEffect(() => {... }, [scoutMode])

Answer 4

useEffect允許您在 function 組件中執行副作用。 由於您的 useEffect 具有 state 依賴項（ scoutMode ），並且基於此，您更改了useEffect內部的狀態（ bottomLinks ），這將導致重新渲染，並且將再次調用useEffect ，這樣繼續下去。 這就是你看到無限循環的原因。 您需要通過添加依賴項來確定何時運行useEffect掛鈎。

在您的情況下，您可以通過添加掛鈎依賴項來告訴 useEffect 在scoutMode更改時運行。

useEffect(() => {
 // your stuff
}, [scoutMode])