Question

我刚刚在一个反应原生项目中开始使用Mobx，并且无法理解如何对观察对象执行更改。

通过我商店中的setWorkingObject动作功能正确更改对象引用会呈现UI，但是如果我只想更改此对象中的单个属性，我该如何渲染渲染？

我的＆＃34;存储＆＃34;：

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

我的＆＃34;容器＆＃34;：

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

和我的＆＃34;组件＆＃34;，它使用一个简单的自定义输入组件（想象它像Checkbox）来对我的工作对象的属性执行更改

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

的任何其他提示/批评

Answer 1

问题是在首次分配workingObject时，只能看到现有属性。

解决方案是在分配时声明未来的属性，即：

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

Answer 2

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

在您的商店中：

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

组件中的

：

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

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

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

组件中的

：

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

mobx，在属性值更改时呈现

2 个答案: