React Native setState

Question

J'essaie de changer mon état depuis la fonction de rendu, mais cela ne fonctionne pas.

render() { 
    return (
     <View> 
      // some code 

      {this._renderModal()} 
     </View> 
    ) 
} 

_renderModal() { 
     let channel = this.props.pusher.subscribe('my-channel'); 
     channel.bind('my-event', data => { 
      this.setState({ 
       requestedToEnter: false 
      }); 
      this.props.navigation.getNavigator('root').push(Router.getRoute('order', { restaurant_id })); 
     }); 

     return (
      <Modal 
       animationType={'slide'} 
       transparent={false} 
       visible={this.state.requestedToEnter} 
       onRequestClose={this._handleEnter}> 

       // some components 
      </Modal> 
     ) 
} 

Quand je reçois le mon événement sur my-canal il déclenche la fonction qui est lie à elle. La méthode setState ne modifie pas l'état (ou le fait mais ne le rend pas). Je pense que c'est parce que j'utilise la méthode setState dans la fonction événement .. Comment puis-je fermer le Modal quand je reçois un événement de poussoir?

Answer 1

Cela est une mauvaise pratique d'appeler this.setState fonction dans votre render() à chaque fois que setState est appelée, le composant se rendra avec les valeurs d'état mises à jour liaison à vos composants/sous-composants.

Vous pouvez également créer un état variable de

this.state = { 
    isModalOpen: true 
} 

Et mettez votre écouteur d'événement poussoir dans componentDidMount() et mettre à jour votre valeur variable d'état dans le rappel. Ensuite, contrôlez la visibilité de votre composant modal avec la variable d'état:

<Modal 
    animationType={'slide'} 
    transparent={false} 
    visible={this.state.isModalOpen}></Modal>