React中useEffect依赖警告与state更新后打印为空的问题

1. useEffect 提示缺少依赖项'tasks'的处理 #

• 如果你的 useEffect 逻辑确实需要依赖tasks状态，直接将其加入依赖数组即可，这样每次tasks更新时，useEffect 都会重新执行，确保逻辑使用最新状态：

  useEffect(() => {
    // 你的业务逻辑代码
  }, [tasks]);
  

• 如果你的逻辑完全不依赖tasks，只是 ESLint 误报，可以添加注释忽略警告，但要确认逻辑真的不需要该依赖，避免闭包捕获旧状态的问题：

  useEffect(() => {
    // 你的业务逻辑代码
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  

2. 调用setTasks后打印tasks为空的问题 #

问题原因 #

setTasks是异步操作，React 不会立即更新状态值。你在 useEffect 里调用getTasks后立刻打印tasks，此时拿到的还是初始的空数组，因为状态更新还未完成。

解决方法 #

方法一：在getTasks内直接打印返回数据

既然response.data.data就是要设置给 tasks 的值，直接打印这个数据就能确认接口返回是否正常：

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
    );
    console.log("接口返回的tasks数据：", response.data.data);
    setTasks(response.data.data);
  }
};

useEffect(() => {
  getTasks();
}, []);

方法二：用useEffect监听tasks变化

新增一个 useEffect 专门监听tasks状态，当状态更新后自动打印最新值：

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();
}, []);

// 监听tasks状态变化，更新后打印最新值
useEffect(() => {
  console.log("最新的tasks状态：", tasks);
}, [tasks]);

方法三：使用useRef保存最新状态（可选）

如果需要在任意时刻获取最新的 tasks 值，可以用 useRef 同步保存状态：

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

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);
    tasksRef.current = response.data.data; // 同步更新ref的值
    console.log("最新的tasks：", tasksRef.current);
  }
};

useEffect(() => {
  getTasks();
}, []);

内容的提问来源于stack exchange，提问作者sina pouladrag