如何解决“无法更新状态”答案

【问题标题】：How to resolve `unable to update state`如何解决“无法更新状态”
【发布时间】：2021-04-21 07:39:18
【问题描述】：

我正在使用 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。您必须向我们展示效果。

标签： reactjs react-native react-redux

【解决方案1】：

你应该这样尝试。

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

【讨论】：

【解决方案2】：

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

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]

Dan 在这里解释：https://github.com/facebook/react/issues/14326

【讨论】：

不起作用。首先不能在 useEffect 中使用，因为它会在组件启动/挂载时运行。它将在那时检查代码，但代码将稍后发送。