Reactjs 如何解决“无法更新状态”`

我正在使用firebase登录来登录我的应用程序。但当我登录时，我只在第一次登录时出现这个错误。如果我关闭并重新打开应用程序，则不会显示此错误。 我的职能是

 async function confirmCode() {
    try {
      await confirm.confirm(code).then((userData) => {
        setModalVisible(false);
        props.navigation.navigate('mTab', {screen: 'Home'});
        setCode('');
        ToastAndroid.show('User Signed In !', ToastAndroid.SHORT);
        user = {
          uid: userData.user.uid,
          name: '',
          phone: userData.user.phoneNumber,
          photoURL: userData.user.photoURL,
          fcmToken: token,
        };
        dispatch(set_user(user));
      });
    } catch (error) {
      ToastAndroid.show('Invalid Code !', ToastAndroid.SHORT);
      console.log(error);
    }
  }

这是调试器中的错误

D:\Native\messengerMuaz\node_modules\react-native\Libraries\Core\ExceptionsManager.js:179 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

---

你应该这样试试

useEffect(() => {
    try {
  await confirm.confirm(code).then((userData) => {
    setModalVisible(false);
    props.navigation.navigate('mTab', {screen: 'Home'});
    setCode('');
    ToastAndroid.show('User Signed In !', ToastAndroid.SHORT);
    user = {
      uid: userData.user.uid,
      name: '',
      phone: userData.user.phoneNumber,
      photoURL: userData.user.photoURL,
      fcmToken: token,
    };
    dispatch(set_user(user));
  });
} catch (error) {
  ToastAndroid.show('Invalid Code !', ToastAndroid.SHORT);
  console.log(error);
}
}, []);

---

尝试将方法包装到异步函数中，如下所示：

useEffect(() => {
  const myMethod = async () => {
    try {
      await confirm.confirm(code).then((userData) => {
        setModalVisible(false);
        props.navigation.navigate('mTab', {screen: 'Home'});
        setCode('');
        ToastAndroid.show('User Signed In !', ToastAndroid.SHORT);
        user = {
          uid: userData.user.uid,
          name: '',
          phone: userData.user.phoneNumber,
          photoURL: userData.user.photoURL,
          fcmToken: token,
        };
        dispatch(set_user(user));
      });
    } catch (error) {
      ToastAndroid.show('Invalid Code !', ToastAndroid.SHORT);
      console.log(error);
    }
  }

  myMethod()
}, [])

要确保请求按顺序进行，可以引入清理功能：

useEffect(() => {
  let didCancel = false

  const myMethod = async () => {
    try {
      if(didCancel){
        return 
      }

      await confirm.confirm(code).then((userData) => {
        setModalVisible(false);
        props.navigation.navigate('mTab', {screen: 'Home'});
        setCode('');
        ToastAndroid.show('User Signed In !', ToastAndroid.SHORT);
        user = {
          uid: userData.user.uid,
          name: '',
          phone: userData.user.phoneNumber,
          photoURL: userData.user.photoURL,
          fcmToken: token,
        };
        dispatch(set_user(user));
      });
    } catch (error) {
      ToastAndroid.show('Invalid Code !', ToastAndroid.SHORT);
      console.log(error);
    }
  }

  myMethod()

  return () => {didCancel = true}
}, [])

您可能希望添加

code

作为依赖项，因为您的请求依赖于它，或者如果您只想在装载时运行它，则将其保留为空。如果要添加

code

请使用

[code]

---

丹在这里解释道：

这只是一个警告。它说它来自一个useEffect，卸载时它没有被清除。你得给我们看看效果，不行。同样的错误发生了，但不起作用。首先，不能在useEffect中使用，因为它将在组件启动/装载时运行。此时将检查代码，但稍后将发送代码。