传入async函数作为useEffect回调触发清理警告，找不到错误原因求助

警告触发原因 #

你收到该警告的核心问题是直接将async异步函数作为参数传给了useEffect：

• async函数默认返回值为Promise对象，而useEffect的入参函数仅允许返回用于清理的函数，其余所有返回值（包括Promise、普通值等）都不符合规范，因此触发了警告。
• 你当前的校验登录场景本身不需要额外写清理逻辑，也不需要强制返回内容，是函数的写法错误导致的警告，和是否需要清理功能无关。

修复方法 #

不要把async关键字写在useEffect的入参函数上，改为在useEffect内部定义异步函数再调用即可，修正后代码如下：

useEffect(() => {
  // 内部单独定义异步校验函数
  const checkLogin = async () => {
    const item = await AsyncStorage.getItem("User");
    console.log(item);
    if (!item) {
      props.navigation.navigate("Login");
      return;
    }
    const user = JSON.parse(item);
    if (user.fullname === "admin") {
      props.navigation.navigate("AdminHP");
    } else {
      props.navigation.navigate("UserHP");
    }
    console.log("effect");
  }

  checkLogin();
  // 不需要返回任何值，符合useEffect的入参规范
}, []);

可选优化 #

如果你担心跳转过程中当前组件提前卸载，导致异步逻辑后续执行抛出异常，可以增加卸载标记做兼容：

useEffect(() => {
  let unmounted = false;
  const checkLogin = async () => {
    const item = await AsyncStorage.getItem("User");
    // 组件已卸载则终止后续逻辑
    if (unmounted) return;
    console.log(item);
    if (!item) {
      props.navigation.navigate("Login");
      return;
    }
    const user = JSON.parse(item);
    if (user.fullname === "admin") {
      props.navigation.navigate("AdminHP");
    } else {
      props.navigation.navigate("UserHP");
    }
    console.log("effect");
  }

  checkLogin();
  // 组件卸载时更新标记
  return () => {
    unmounted = true;
  };
}, []);

内容的提问来源于stack exchange，提问作者Emran Qedan