在 React 组件中注入 Store 会导致错误答案

【问题标题】：Injecting Store in React component results in Error在 React 组件中注入 Store 会导致错误
【发布时间】：2017-09-10 09:38:53
【问题描述】：

我正在尝试向我的 React 组件注入一个商店，但是我收到以下错误：

未定义不是函数（评估'decorator(target,property,desc)'）

在我的 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;
        }
    }
}

【问题讨论】：

您正在将inject 导入到您的PoolComponent.js 文件中，但您似乎没有使用它。不使用inject 是否会出现此错误？
我试图打印这两个东西：和 {this.props.store.phValue} 但两者都导致同样的错误。
我明白了。但是您实际上并未在问题中包含的代码中的任何地方使用inject。此外，您希望从MeasurementsStore.js 文件中的mobx 导入，而不是mobx-react。
当我将@inject('MeasurementsStore') 放在我的PoolComponent 上方并将mobx-react 更改为mobx 时，我收到此错误：Undefined is not a function (evaluating '(0, _mobx.inject)('MeasurementsStore')') 当我导入商店时，我收到与中相同的错误我的开始帖子

标签： react-native mobx mobx-react

【解决方案1】：

在这种情况下，您不需要注入。您将商店直接传递给您的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.js 中导出MeasurementsStore 的实例：

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;

【讨论】：