使用Mobx React时未渲染React Native Web

时间:2019-11-01 12:41:11

标签: react-native mobx mobx-react react-native-web

我都使用React Native 0.60和Mobx,但是发现当Mobx操作完成时,Mobx-React不会更新Component props;

这是我的代码:

Store.js

class Store {
    @observable test = 1;

    @action.bound
    updateValue() {
        console.log('update')
        this.test = this.test + 1;
    }

}

export default new Store();

index.js

import React, { Component } from 'react';
import { Provider } from 'mobx-react';
import Store from './Store';
import VipCashierContainer from './VipCashierContainer';

class VipCashier extends Component {
    render() {
        return (
            <Provider
                test={Store.test}
                updateValue={Store.updateValue}
            >
                <VipCashierContainer/>
            </Provider>
        )
    }
}

export default VipCashier;

VipCashierContainer

/*
 * @Author: zhenxi.gzx 
 * @Date: 2019-08-28 10:22:31 
 * @Last Modified by: zhenxi.gzx
 * @Last Modified time: 2019-11-01 20:30:28
 */

import React, { Component } from 'react';
import { inject, observer } from 'mobx-react';
import { View, ScrollView, StyleSheet,TouchableWithoutFeedback, Text } from 'react-native';

@inject('updateValue', 'test')
@observer
class VipCashierContainer extends Component {
    onPress = () => {
        this.props.updateValue();
    }
    render() {
        console.log('this.props', this.props);
        return (
            <View style={styles.wrapper}>
                <ScrollView style={styles.vipCashier}>
                    <TouchableWithoutFeedback onPress={this.onPress.bind(this)}>
                        <View><Text>Update{this.props.test}</Text></View>
                    </TouchableWithoutFeedback>
                </ScrollView>
            </View>
        )
    }
}

export default VipCashierContainer;

我的结论是我确实更新了观察数据,但是 React Component道具仍然是旧值,因此它永远不会导致Component渲染,这是错误的和我在一起?

这是我的受抚养者

  "dependencies": {
    "mobx": "^5.14.2",
    "mobx-react": "^6.1.4",
    "react": "16.8.6",
    "react-art": "16.8.6",
    "react-dom": "16.8.6",
    "react-native": "^0.55.4",
    "react-native-web": "^0.11.7"
  },

0 个答案:

没有答案