web-dev-qa-db-fra.com

Passer l'état du composant enfant au parent dans React Native

Mon application possède un écran de paramètres (composant enfant) dans lequel vous pouvez modifier les informations vous concernant. J'essaie de le faire afficher sur l'écran de profil de mon application (composant parent). Ainsi, l'écran de profil affiche vos informations et si vous souhaitez modifier des informations, vous devez le faire dans les paramètres. À l'heure actuelle, toutes les modifications apportées dans l'écran des paramètres sont affichées dans Firebase, mais si je reviens à l'écran du profil, les modifications apportées aux paramètres ne sont pas rendues. Bien sûr, si je ferme l’application et la recharge, les modifications y seront apportées car les modifications apportées aux paramètres sont enregistrées dans firebase; Cependant, l'état ne passe pas du composant enfant au parent. Quelqu'un a-t-il des conseils sur la manière de passer d'un état à l'autre du composant paramètres (enfant) au composant profil (parent)?

react-nativeparent-childstate
6
Forrest

Vous pouvez essayer de redux, il stocke les données en état par accessoires chaque fois que vous modifiez des données dans le magasin redux.

Une autre idée est de passer une méthode setState au composant enfant.

Parent

class Parent extends Component {
    updateState (data) {
        this.setState(data);
    }
    render() {
        <View>
            <Child updateParentState={this.updateState.bind(this)} />
        </View>
    }
}

Enfant

class Child extends Component {
    updateParentState(data) {
        this.props.updateParentState(data);
    }

    render() {
        <View>
            <Button title="Change" onPress={() => {this.updateParentState({name: 'test'})}} />
        </View>
    }
}
10
Kishan Mundha

Vous devriez regarder dans un module de gestion d'état tel que Redux pour voir si cela fonctionnerait avec votre application, mais sans rien, vous pouvez le réaliser en procédant comme ceci:

// ---------------------------------------------
// Parent:

class Parent extends React.Component {
  updateData = (data) => {
    console.log(`This data isn't parent data. It's ${data}.`)
    // data should be 'child data' when the
    // Test button in the child component is clicked
  }
  render() {
    return (
      <Child updateData={val => this.updateData(val)} />
    );
  }
}

// ---------------------------------------------
// Child:

class Child extends React.Component {
  const passedData = 'child data'
  handleClick = () => {
    this.props.updateData(passedData);
  }
  render() {
    return (
      <button onClick={this.handleClick()}>Test</button>
    );
  }
}
3
chapeljuice

Après avoir essayé plusieurs options différentes, nous avons décidé d'implémenter Redux pour gérer l'état dans notre application. C'était difficile à faire avec notre navigation, mais maintenant que tout est en place, je dirais que l'effort en valait la peine. Nous avons envisagé d’autres solutions de gestion d’État, telles que MobX, mais nous avons décidé d’utiliser Redux, car cela correspond à notre configuration de navigation. 

1
Forrest