Injecter Magasin dans React résultats composants dans l'erreur

Question

Je suis en train d'injecter un magasin à mon React Component mais je reçois l'erreur suivante:

Undefined is not a function (evaluating 'decorator(target,property,desc)')

Dans mes app.js Je:

import React, { Component } from 'react'; 
import PoolComponent from './app/Components/PoolComponent'; 
import MeasurementsStore from './app/Stores/MeasurementsStore'; 

export default class PoolApp extends Component { 

render() { 
    return (
     <PoolComponent store="MeasurementsStore"/> 
    ); 
} 

}

Dans mes PoolComponent.js

import React, { Component } from 'react'; 
import { observer, inject } from 'mobx-react'; 
import { AppRegistry, Text, View, TextInput , Picker, Button} from 'react-native'; 

@observer 
export default class PoolComponent extends Component { 
saveItems() { 
    console.log('Pressed save'); 
} 
render() { 
    const store = this.props.store; 
    return (
     <View> 
      <Text>Selecteer Pool</Text> 
      <Picker> 
       <Picker.Item label="Big" value="big"/> 
       <Picker.Item label="Small" value="small"/> 
      </Picker> 
      <Text>PH</Text> 
      <TextInput/> 

      <Text>Totaal Chloor</Text> 
      <TextInput/> 

      <Text>Vrij Chloor</Text> 
      <TextInput/> 
      <Button 
       title="Learn More" 
       color="#841584" 
       accessibilityLabel="Opslaan" 
       onPress={this.saveItems} 
      /> 
     </View> 
    ); 
} 
} 

Et MeasurementsStore.js Je

import {observable, action, computed} from 'mobx-react'; 

export default class MeasurementsStore { 
    @observable phValue = 0; 
    @observable freeChlorine = 0; 
    @observable totalChlorine = 0; 
    @observable totalAlkalinity = 0; 

    @action data(data: Object) { 
     if (data.phValue) { 
      this.phValue = data.phValue; 
     } 
     if (data.freeChlorine) { 
      this.freeChlorine = data.freeChlorine; 
     } 
     if (data.totalChlorine) { 
      this.totalChlorine = data.totalChlorine; 
     } 
     if (data.totalAlkalinity) { 
      this.totalAlkalinity = data.totalAlkalinity; 
     } 
    } 
} 

Answer 1

Vous n'avez pas besoin injectent dans ce cas. Vous passez le magasin directement à votre PoolComponent, donc ce n'est pas nécessaire. Vous devez changer quelques petites choses cependant:

passer le magasin réel, pas seulement le nom du magasin sous forme de chaîne, en App.js:

import React, { Component } from 'react'; 
import PoolComponent from './app/Components/PoolComponent'; 
import measurementsStore from './app/Stores/MeasurementsStore'; 

export default class PoolApp extends Component { 

render() { 
    return (
     <PoolComponent store={measurementsStore}/> 
    ); 
} 

importation de mobx et exporter une instance de MeasurementsStore dans MeasurementsStore.js:

import {observable, action, computed} from 'mobx'; 

class MeasurementsStore { 
    @observable phValue = 0; 
    @observable freeChlorine = 0; 
    @observable totalChlorine = 0; 
    @observable totalAlkalinity = 0; 

    @action data(data: Object) { 
     if (data.phValue) { 
      this.phValue = data.phValue; 
     } 
     if (data.freeChlorine) { 
      this.freeChlorine = data.freeChlorine; 
     } 
     if (data.totalChlorine) { 
      this.totalChlorine = data.totalChlorine; 
     } 
     if (data.totalAlkalinity) { 
      this.totalAlkalinity = data.totalAlkalinity; 
     } 
    } 
} 

const measurementsStore = new MeasurementsStore(); 

export default measurementsStore;