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

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

Store.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();

App.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 View:

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',
    },

});

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


react-native mobx mobx-react
person barrylachapelle    schedule 10.01.2020    source источник
comment
Хорошо, после некоторого копания кажется, что его представление RN не обновляется. Если я сделаю взлом обновления просмотра, он отобразится. ‹Название кнопки = Изменить цвет onPress = {() =› [this.props.booksStore.updateColor ('yellow'), this.setState ({refresh: 1})]} / ›Есть идеи?   -  person barrylachapelle    schedule 10.01.2020

Ответы (1)


arrow_upward
0
arrow_downward

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

decorate(BooksStore, {
    bookColor: observable, <<<<<<<<<<<<<
    testAction: action,
});
person barrylachapelle    schedule 15.01.2020