mobx，当属性值改变时渲染

Question

我刚开始在 react-native 项目中使用 Mobx，我无法理解如何对观察到的对象执行更改。

通过我商店中的 setWorkingObject 操作函数更改对象引用可以正确呈现 UI，但是如果我只想更改此对象中的单个属性，该怎么做我造成渲染？

我的"store":

export default class MyStore {
    constructor() {
        extendObservable(this, {    
            workingObject: null
        });
    }
}

我的"container":

class Container extends Component {
    render() {
        return (
            <Provider store={new MyStore()}>
                <App />
            </Provider>
        );
    }
}

和我的 "component"，它使用一个简单的自定义输入组件（将其想象成复选框）来对我的 workingObject

的属性执行更改

class MyClass extends Component {
    ...
    render() {
        const {store} = this.props;
        return
            <View>
                ...
                <RadioGroup
                    options={[
                        { title: "One", value: 1 },
                        { title: "Two", value: 2 }
                    ]}
                    onPress={option => {
                        store.workingObject.numberProperty = option.value;
                    }}
                    selectedValue={store.workingObject.numberProperty}
                />
            ...
            </View>
    }
}
export default inject("store")(observer(MyClass));

我不明白为什么这不起作用，实际上它看起来与 this example

中使用的方法非常相似

关于我如何实施 mobx welcome 的任何其他 tips/critique

Answer 1

问题在于，在首次分配 workingObject 时，只有现有属性才可观察。

解决方法是在赋值的时候声明future属性，即：

// some time prior to render
store.workingObject = { numberProperty:undefined };

Answer 2

首先，您不想将初始值设置为空。其次，在创建可观察对象后向其添加属性不会使添加的属性可观察。您需要使用 extendObservable() 而不是直接将新属性分配给可观察对象。另一种解决方案是改用可观察地图。

在您的商店中：

extendObservable(this, {    
    workingObject: {}
});

在你的组件中：

extendObservable(store.workingObject, {numberProperty: option.value});

我建议在这种情况下使用地图：

extendObservable(this, {workingObject: new Map()});

在你的组件中：

store.workingObject.set(numberProperty, option.value);

mobx，当 属性 值改变时渲染

mobx, render when a property value changes

react-native

mobx

mobx，当属性值改变时渲染