React Hook useEffect 缺少一個依賴項：'tasks'。 包括它或刪除依賴數組

Question

我從后端獲取數據並在 componentdidmount 中設置為我的 state 但在日志 state 后未設置值

  const [tasks, setTasks] = useState([]);

  const getTasks = async () => {
    const getTodoInformation = {
      email: localStorage.getItem("tokenEmail"),
    };
    if (getTodoInformation.email) {
      const response = await axios.post(
        "http://localhost:9000/api/todo/get",
        getTodoInformation
      );
      setTasks(response.data.data);
    }
  };

  useEffect(() => {
    getTasks();
    console.log(tasks);
  }, []);

登錄時我的任務是空的

Answer 1

 const [tasks, setTasks] = useState([]);     
   useEffect(() => {
   setTimeout(async () => {
  const getTodoInformation = {
      email: localStorage.getItem("tokenEmail"),
    };
    if (getTodoInformation.email) {
  const response = await axios.post(
    "http://localhost:9000/api/todo/get",
    getTodoInformation
  );
  setTasks(response.data.data);
}
  }, 1000);
console.log(tasks);
 }, []);

Answer 2

所以標題和問題本身其實是兩個問題。

React Hook useEffect 缺少一個依賴項：'tasks'。 要么包含它，要么移除依賴數組

那是因為您在useEffect掛鈎中包含了 state （即tasks ）。 React 基本上是在問你，“你的意思是每次更新tasks時都運行console.log(tasks)嗎？”。 因為你正在做的是一次且只運行一次useEffect鈎子。

對於您的“實際”問題

日志 state 后未設置值

簡而言之，狀態是在 React 中以異步方式設置的。 這意味着tasks不需要在您調用setTasks后立即更新。 有關詳細信息，請參閱@JBallin 評論。

Answer 3

主要問題是 useEffect -> 是一個同步方法， getTasks() 是異步的，並且 useEffect 只在組件掛載時起作用。 簡而言之，您在 useEffect 工作后從后端獲取了數據。

例如，如果您要再添加一個 useEffect

useEffect(() => {
  console.log(tasks);
}, [tasks]);

在您的數據發生更改后，您將看到日志。

Answer 4

您可以在 useEffect 中使用自調用async useEffect ，如下所示：

const [tasks, setTasks] = useState([]);

const getTasks = async () => {
  const getTodoInformation = {
    email: localStorage.getItem("tokenEmail"),
  };

  if (getTodoInformation.email) {
    const response = await axios.post(
      "http://localhost:9000/api/todo/get",
      getTodoInformation
    );

    return response.data.data;
  }
};

useEffect(() => {
  (async () => {
    const tasks = await getTasks();

    setTasks(tasks);
  })();

  console.log(tasks);
}, [tasks]);