1
votes

Quel est l'équivalent de `componentDidMount ()` dans Flutter

Je viens de ReactJS et React Native. Je veux essayer Flutter. Jusqu'à présent, je veux avoir un écran de connexion. Par conséquent, je veux vérifier si un utilisateur est déjà connecté. Si c'est le cas, passez à l'écran d'accueil. Sinon, affichez l'écran de connexion.

Dans React avec TypeScript et Firebase, je le ferais de cette façon:

interface RootScreenState {
  isLoading: boolean;
  user: firebase.User | null;
}

class RootScreen extends React.Component<{}, RootScreenState> {

  constructor(props) {
    super(props);

    this.state = {
      isLoading: true,
      user: null
    }
  }

  componentDidMount() {

    // make an async call to some firebase libraries to look for stored user credentials
    // if some credentials are found try to login
    // of no credentials are found or login fails return null
    // otherwise the user is returned
    tryToLogin().then((currentUser: firebase.User | null) => {
      this.setState({
        isLoading: false,
        user: currentUser
      }).catch(err => { /* do some error handling */});
  }

  render() {
    const { isLoading, user } = this.state;

    if(isLoading) return ( /* loading screen */ );
    else if(user === null) return ( /* login screen */ );
    else return ( /* home screen */ );
  }
}

Comment faire avec Flutter? Je n'ai rien trouvé sur l'équivalent de compnentDidMount () , dois-je le faire dans le constructeur? Dans React, cela échouerait.

flutter reactjs dart react-native state

0 commentaires

3 Réponses :

4
votes

utilisez initState dans le widget avec état. InitState est appelé lorsque le widget avec état est peint pour la première fois. Par ex

class _MyAppState extends State<MyApp> {
  Future<Album> futureAlbum;

  @override
  void initState() {
    super.initState();
    futureAlbum = fetchAlbum();
  }

1 commentaires

Flutter Docs doit le mentionner dans le Section React Native Developers . Ou est-ce que je l'ai manqué? Merci quand même

2
votes

Vous pouvez le faire dans initState de Flutter. Il est appelé en premier lorsque votre arborescence de widgets est rendue.

Vérifiez le code ci-dessous:

  @override
  void initState() {
    super.initState();
  }

Pour plus de détails sur diverses choses dans React Native que vous souhaitiez connaître dans Flutter. Voir le lien ci-dessous: Il s'agit de la documentation officielle des personnes qui arrivent à Flutter à partir d'un arrière-plan React Native.

Documentation

J'espère que cela vous aidera.

1 commentaires

déjà vérifié mais a manqué des explications sur les équivalents des méthodes de cycle de vie de React. A créé un problème dans leur référentiel GItHub

0
votes

Pour demander des données au serveur, vous pouvez utiliser FutureBuilder directement.

Parfois, la construction d'un widget se déclenchera deux fois si vous mettez les états dans l'état initial de manière incorrecte.

Je préfère mettre FutureBuilder dans la portée de construction de widgets et plus propre et plus lisible pour moi.

0 commentaires