为什么Mobx声称我试图改变一个可观察到的值？

Question

每次我尝试访问mobx类实例的计算值时，我都会得到

[MobX] Since strict-mode is enabled, changing (observed) observable values without using an action is not allowed. Tried to modify: VoiceSettings@3.voices

我创建了一个类似这样的类：

import {action, computed, makeObservable, observable} from "mobx"

export default class VoiceSettings {
    @observable language: Language = 'en';
    @observable speaker?: Voice;
    @observable voices: Voice[] = [];

    constructor() {
        makeObservable(this);
        this.getAvailableVoices();
    }

    async getAvailableVoices() {
        this.voices = await Speech.getAvailableVoicesAsync();
        return this.voices;
    }

    @computed
    get speakers(): string[] {
        return this.voices
            .filter(voice => voice.language.startsWith(this.language))
            .map(voice => voice.name)
    }

    @action
    setLanguage(language: Language) {
        this.language = language;
    }
}

export const voiceSettings = new VoiceSettings();

这种情况似乎只有在我打电话给voiceSettings.speakers时才会发生。

更新我的错误。被错误信息绊倒了。我在代码中的其他地方调用了voice. getAvailableVoices()方法

Answer 1

问题是，只有对可观测数据的同步更改才能在操作中工作，因此当Speech.getAvailableVoicesAsync()已经解决并分配给this.voices时，从技术上讲，它不再存在于操作中。

如何创建异步操作是在文件中讨论。其中一种方法就是使用runInAction

async getAvailableVoices() {
    const voices = await Speech.getAvailableVoicesAsync();

    runInAction(() => {
        this.voices = voices;
    });

    return this.voices;
}