MobX - 将参数传递给可观察的操作以更改可观察的值？

Question

我有一个 MobX 商店，以及一个 react 原生类设置和工作，但没有达到预期的效果。我在UserPreferencesStore 中有一个可观察到的用户偏好列表，如下所示：

class UserPreferencesStore {
    @observable userPreferences = {
        receive_upvotes_mail: 0,
        receive_answers_mail: 0,
        receive_comments_mail: 1
    }
}

在 react native 类中，我想根据TouchableHighlight 的 onPress 更新上面的 observables，如下所示：

<TouchableHighlight onPress={() => this.onPressPreference('receive_upvotes_mail')}>
    <Image source={require('images/Email.png')}
           style={UserPreferencesStore.userPreferences.receive_upvotes_mail == 1 && styles.active} />
</TouchableHighlight>

<TouchableHighlight onPress={() => this.onPressPreference('receive_answers_mail')}>
    <Image source={require('images/Email.png')}
           style={UserPreferencesStore.userPreferences.receive_answers_mail == 1 && styles.active} />
</TouchableHighlight>

<TouchableHighlight onPress={() => this.onPressPreference('receive_comments_mail')}>
    <Image source={require('images/Email.png')}
           style={UserPreferencesStore.userPreferences.receive_comments_mail == 1 && styles.active} />
</TouchableHighlight>

这里是 onPressPreference 更新不起作用的可观察对象的操作...

@action onPressPreference = (preferenceName) => {
    // alert(preferenceName);
    UserPreferencesStore.userPreferences.preferenceName = UserPreferencesStore.userPreferences.preferenceName == 0 ? 1 : 0;
}

preferenceName 参数完美传递，如警报所示，但在此处“附加”UserPreferencesStore.userPreferences.preferenceName 以更新传递的首选项可观察存储值时，它似乎不起作用。

但是，如果我创建 3 个动作，每个偏好一个，并在按下时触发它们，那么它会起作用，并且可观察对象会正确更新商店中的值，但是重复了很多代码，我真的很想得到它将传递的参数用于单个操作。

知道如何让传递的参数与单个操作一起更新相应的 observable 的值吗？

Answer 1

您需要使用括号表示法来访问具有变量名称的属性。 UserPreferencesStore.userPreferences[preferenceName] = UserPreferencesStore.userPreferences[preferenceName] == 0 ? 1 : 0;