警告：無法對未安裝的組件執行 React state 更新。 Firebase 本機反應

Question

我正在使用 Expo 和 Firebase 身份驗證構建應用程序，當我登錄並注冊用戶時一切正常，但是當我在 Account.js 中注銷並且應用程序返回登錄屏幕時它顯示警告： Warning: Can't perform a React state update on an unmounted component ，當我注銷用戶時會發生這種情況，但每當我使用auth.currentUser.delete()從 Firebase 中刪除用戶時，我都會嘗試使用componentWillUnmount但我要么不要正確使用它或它不起作用。

應用程序.js

export class App extends Component {

  componentDidMount() {
    auth.onAuthStateChanged((user) => {
      if (!user) {
        this.setState({ loaded: true })
        this.setState({ loggedIn: false })
      } else {
        this.setState({ loaded: true })
        this.setState({ loggedIn: true })
      }
    })
  }  

  render() {
    const { loggedIn } = this.state;

    if (!loggedIn) {
      return (
        <Provider store={store}>
          <NavigationContainer>
            <Stack.Screen name="Register" component={RegisterScreen}/>
          <Stack.Screen name="LogIn" component={LogInScreen}/>
          </NavigationContainer>
        </Provider>
    );
    } else {
      return (
        <Provider store={store}>
            <NavigationContainer>
              <Stack.Screen name="TabNavigator" component={TabNavigatorScreen}/>
            </NavigationContainer>
          </Provider>
      )
    }

  }}

export default App;

帳戶.js

export class Account extends React.Component {

  onSignOut = () => {
    auth
      .signOut()
  }



  render() {
    return (
      <View>
                <CustomButton
                  buttonTxt={'Sign Out'}
                  backgroundColor={'black'}
                  onPress={this.onSignOut}
                  txtColor={'white'}
                />
      </View>
    )
}}

export default Account;

TabNavigator.js

export class TabNavigator extends React.Component {

  componentDidMount() {
    this.props.fetchUser();
  }


  render() {

      return (
        <Tab.Navigator>
          <Tab.Screen
            name="Orders"
            component={OrdersScreen}
          />
          <Tab.Screen
            name="Account"
            component={AccountScreen}
           />
        </Tab.Navigator>

      );
  }
}


export default TabNavigator;

Firebase.js

import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';
import { getFirestore } from 'firebase/firestore';
import { getDatabase } from 'firebase/database';


const firebaseConfig = {
  apiKey: "xxxxxxxxxxxxxxx",
  authDomain: "xxxxxxxxxxxxxxx",
  databaseURL: "xxxxxxxxxxxxxxxxxxxxx",
  projectId: "xxxxxxxxxxxxxx",
  storageBucket: "xxxxxxxxxxxxxxxxxxxxx",
  messagingSenderId: "xxxxxxxxxxxxxxxxx",
  appId: "xxxxxxxxxxxxxxx",
  measurementId: "xxxxxxxxxxxxxxxx"

};

let app = initializeApp(firebaseConfig);

const auth = getAuth(app);
const db = getFirestore(app);
const dbMenu = getDatabase(app);
const user = getAuth().currentUser;

export { auth, db, user, dbMenu };

Answer 1

這只是一個警告，根本不會影響應用程序，但它的意思是您應該刪除訂閱，以便在卸載組件后不會發生 setState。

    public componentDidMount() {
      this.unsubscribe = firebase.auth().onAuthStateChanged();
    }

    public componentWillUnmount() {
      return this.unsubscribe && this.unsubscribe();
    }