Внедрение Store в компонент React приводит к ошибке

Я пытаюсь внедрить хранилище в свой компонент React, но получаю следующую ошибку:

Undefined не является функцией (оценка «декоратора (цель, свойство, описание)»)

В моем 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"/>
    );
}

}

В моем 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>
    );
}
}

А в MeasurementsStore.js у меня есть

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;
        }
    }
}

react-native mobx mobx-react
person sanders    schedule 10.09.2017    source источник
comment
Вы импортируете inject в свой файл PoolComponent.js, но, похоже, вы его не используете. Вы получаете эту ошибку без использования inject?   -  person Tholle    schedule 10.09.2017
comment
Я попытался напечатать эти две вещи: «Текст{this.props.MeasurementsStore.phValue}‹/Text› и ‹Text›{this.props.store.phValue}‹/Text›, но оба приводят к одной и той же ошибке.   -  person sanders    schedule 10.09.2017
comment
Я понимаю. Но на самом деле вы не используете inject нигде в коде, который вы включили в свой вопрос. Кроме того, вы хотите импортировать из mobx в файл MeasurementsStore.js, а не из mobx-react.   -  person Tholle    schedule 10.09.2017
comment
Когда я ставлю @inject('MeasurementsStore') над своим PoolComponent и меняю mobx-react на mobx, я получаю эту ошибку: Undefined is not a function (evaluating '(0, _mobx.inject)('MeasurementsStore')') И когда я импортирую магазин, я получаю ту же ошибку, что и в моем стартовом посте.   -  person sanders    schedule 10.09.2017

Ответы (1)


arrow_upward
2
arrow_downward

Вам не нужно вводить в этом случае. Вы передаете магазин напрямую своему PoolComponent, поэтому в этом нет необходимости. Однако вам нужно изменить несколько вещей:

Передайте фактический магазин, а не только название магазина в виде строки, в 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}/>
    );
}

Импорт из mobx и экспорт экземпляра MeasurementsStore в 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;
person Tholle    schedule 10.09.2017