警告:除了用于清理的函数之外，效果函数不能返回任何东西

Question

我找不到我的错误，为什么我应该使用清理，并返回任何东西，当我使用useeffect我只是想检查用户是否登录。

?

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提供的答案是正确的，但它缺乏解释，正如martin在评论中提到的那样，根本问题是因为React的useEffect钩子期望从回调中返回一个清理函数，该函数在组件卸载时调用。使用像

这样的异步函数

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

这里的会导致bug，因为当useEffect的async回调函数被调用时，返回的是Promise而不是function。但是规则是，我们应该返回清理函数，或者从给useEffect的回调中什么都不返回，但是async函数的属性总是返回Promise，这违反了这条规则。要解决这个问题，可以使用稍微优雅的语法，如

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

Answer 3

我也有同样的问题，据我所知:

建议不要发送一个async函数作为useEffect的直接回调，但是你可以传递一个回调，在其中声明一个async函数

useEffect(() => {
async function func() {
await method()
}
}, [])