2017-07-12 3 views
1

J'ai un composant simple qui rend null, mais devrait afficher une alerte iOS/Android lorsque shown prop à partir du magasin de notification est changé en vrai, ça fonctionne bien une fois en utilisant autorun/reaction/quand de mobx et je peux voir à travers spy que hideNotification est également tiré correctement pour remettre shown à false, mais je ne peux plus re-déclencher l'alerte plus.Impossible d'obtenir mobx autorun, réaction, quand re-déclencher plus d'une fois

Component

import { Component } from "react"; 
import { observer, inject } from "mobx-react/native"; 
import { reaction } from "mobx"; 
import { Alert } from "react-native"; 

@inject("notification") 
@observer 
class Notification extends Component { 
    // -- methods ------------------------------------------------------------- // 
    componentDidMount() { 
    reaction(
    () => this.props.notification.shown, 
    () => { 
     if (this.props.notification.shown) 
      Alert.alert(
      this.props.notification.type, 
      this.props.notification.message, 
      [ 
       { 
       text: "Close", 
       onPress: this.props.notification.hideNotification 
       } 
      ] 
     ); 
     } 
    ); 
    } 

    // -- render -------------------------------------------------------------- // 
    render() { 
    return null; 
    } 
} 

export default Notification; 

Magasin

import { observable, action } from "mobx"; 

const ERROR = "notification/ERROR"; 
const SUCCESS = "notification/SUCCESS"; 

class NotificationStore { 
    // -- store --------------------------------------------------------------- // 
    @observable type = ERROR; 
    @observable message = ""; 
    @observable shown = false; 

    // -- actions ------------------------------------------------------------- // 
    @action 
    errorNotification(message) { 
    this.type = ERROR; 
    this.message = message; 
    this.shown = true; 
    } 

    @action 
    successNotification(message) { 
    this.type = SUCCESS; 
    this.message = message; 
    this.shown = true; 
    } 

    @action 
    hideNotification() { 
    this.shown = false; 
    } 
} 

export default NotificationStore; 
+0

Êtes-vous s ure 'autorun' ne fonctionne pas? [** Ca marche pour moi **] (http://jsbin.com/nucoqutaha/1/edit?js,console,output). – Tholle

Répondre

0

Et la question est que les fonctions de classe ne sont pas binded correctement les changer pour

@action 
    errorNotification = (message) => { 
    this.type = ERROR; 
    this.message = message; 
    this.shown = true; 
    } 

résolu ce problème pour moi