React Hook useEffect 缺少一个依赖项：'tasks'。 包括它或删除依赖数组

Question

I get data from backend and set to my state in componentdidmount but value not set after log 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);
  }, []);

My tasks is empty when i log it

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

So the title and the question itself are actually two questions.

React Hook useEffect has a missing dependency: 'tasks'. Either includes it or remove the dependency array

That's because you include a state (ie tasks ) in the useEffect hook. And React is basically asking you, "Do you mean run console.log(tasks) every time tasks is updated?". Because what you are doing is run the useEffect hook once and only once.

And for your "actual" question

value not set after log state

In short, states are set in async manner in React. That means tasks is not necessary immediately updated right after you call setTasks . See @JBallin comment for details.

Answer 3

The main problem is that useEffect -> is a sync method, getTasks() is asynchronous, and useEffect only works once when your component mounts. Shortly speaking, you got your data from the backend after useEffect worked.

For example, if you will add one more useEffect

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

You will see log, after your data will have changed.

Answer 4

You can use self-calling async function inside useEffect as shown here:

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]);