在 React 组件中注入 Store 导致错误
Injecting Store in React component results in Error
我正在尝试将商店注入我的 React 组件,但是我收到以下错误:
Undefined is not a function (evaluating '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;
}
}
}
在这种情况下您不需要注入。您正在将商店直接传递给您的 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;
我正在尝试将商店注入我的 React 组件,但是我收到以下错误:
Undefined is not a function (evaluating '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;
}
}
}
在这种情况下您不需要注入。您正在将商店直接传递给您的 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;