警告：效果函数不能返回除用于清理的函数之外的任何内容

Question

我找不到我的错误，为什么我应该使用 cleanup ，并在使用 useefect 时返回任何内容，我只想检查用户是否登录..？

useEffect(async () => {
    var item = await AsyncStorage.getItem("User");
    console.log(item);
    if (item == null || item == undefined) {
      props.navigation.navigate("Login");
    }
    else {
      var user = await JSON.parse(item);
      if(user.fullname=="admin"){
        props.navigation.navigate("AdminHP");
      }
      else{
        props.navigation.navigate("UserHP");
      }
    }
    console.log("effect");
    
  },[]);

Answer 1

useEffect(() => {
    async function check() {
      var item = await AsyncStorage.getItem("User");
    console.log(item);
    if (item == null || item == undefined) {
      props.navigation.navigate("Login");
    }
    else {
      var user = await JSON.parse(item);
      if(user.fullname=="admin"){
        props.navigation.navigate("AdminHP");
      }
      else{
        props.navigation.navigate("UserHP");
      }
    }
    console.log("effect");
    }

    check()
  }, [])

Answer 2

虽然 Emran Quedan 提供的答案是正确的，但它缺乏解释，正如马丁在评论中提到的那样，根本问题是因为 React\xe2\x80\x99suseEffect钩子期望从其回调返回一个清理函数，该函数在组件调用时调用卸载。使用像这样的异步函数

\n

useEffect(async () => {\n\n},[])\n

\n

这里会导致一个bug，因为当 async调用回调函数时useEffect，返回的是Promise而不是function。但规则是我们要么返回清理函数，要么从给定的回调函数中不返回任何内容useEffect，但异步函数的属性总是返回Promise，这违反了此规则。解决这个问题稍微优雅的语法就像

\n

useEffect(() => {\n (async () => {\n\n    //Put your logic here\n\n  })();\n\n  }, [])```\n\nIn the above syntax, `async` function is defined and immediately called.\n

\n