Наблюдаемый MobX не обновляется в React Native - PullRequest
Новая
       32

Наблюдаемый MobX не обновляется в React Native

1 голос
/ 10 января 2020

Я пытаюсь выполнить горячее обновление sh наблюдаемых данных в собственном режиме реакции. Начальное значение отображается отлично, но не ссылается sh, когда я вызываю действие из магазина, чтобы изменить его. Однако оно изменяется (у меня есть другое представление, где я вижу изменения), но не на экране, который вызывает действие для обновления. Любые идеи? Я использую React Navigation. Не уверен, что это как-то мешает.

Магазин. js

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

class BooksStore {

    bookColor = 'green'

    testAction = () => {
        console.log('change store value')
        this.bookColor = 'blue'
    }

}

decorate(BooksStore, {
    loading: observable,
    testAction: action,
});

export default new BooksStore();

Приложение. js

import React from 'react';
import Routes from './Routes';

import { Provider } from 'mobx-react';
import BooksStore from './src/Stores/BooksStore';

export default function App() {
  return (

    <Provider booksStore={BooksStore}>
      <Routes /> //react-navigation stacks
    </Provider>

  );
}

RN Просмотр: 

import React, { Component } from 'react';
import { Image, View, Button, Alert, ScrollView, Dimensions, StyleSheet, Text } from 'react-native';
import { inject, observer, Observer} from 'mobx-react'

class MobX1 extends Component {


    render() {

        console.log(this.props.booksStore.bookColor)

        return (

            <View style={styles.container}>

                //this displays initial store val but no refresh when I call testAction()
                <Observer>{() => 
                    <Text style={{ marginBottom: 48 }}>{this.props.booksStore.bookColor}</Text>
                }</Observer>

                <Button
                    title="Change to Blue"
                    onPress={() => this.props.booksStore.testAction()} />

            </View>

        );
    }
}


export default inject('booksStore')(observer(MobX1));

//------------------------------ styles -------------------------------//

const styles = StyleSheet.create({

    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },

});

Спасибо за любую помощь

1 Ответ

0 голосов
/ 15 января 2020

Любой, кто сталкивался с этим ... Я забыл правильно украсить ... durrrrr 

decorate(BooksStore, {
    bookColor: observable, <<<<<<<<<<<<<
    testAction: action,
});
...