添加到可观察数组时，mobx 反应无法触发

Question

我正在尝试在将项目添加到可观察数组或从可观察数组中删除时触发 mobx 反应。

目前仅在移除物品时触发

type QueryParam = {
    name: string
    value: string
}

export default class SelectStore {
    rootStore: RootStore;
    constructor(rootStore: RootStore) {
        this.rootStore = rootStore;
    }

    @observable testRunFilters: QueryParam[] = [];

    @action updateTestRunFilter = (queryParam: QueryParam) => {
        const existingParam = this.testRunFilters.find(q => q.name === queryParam.name && q.value === queryParam.value);
        if (!existingParam) {
            this.testRunFilters.push(queryParam);
            //console.log('In updateTestRunFilter' + this.testRunFilters);
        }
    }

    @action removeTestRunFilter = (queryParamName: string) => {
        const existingParam = this.testRunFilters.find(q => q.name === queryParamName);
        if (existingParam) {
            this.testRunFilters = this.testRunFilters.filter(q => q.name !== queryParamName);
            //console.log('In removeTestRunFilter' + this.testRunFilters);
        }
    }

    myReaction = reaction(
        () => this.testRunFilters,
        (testRunFilters) => {
            console.log('Hello!' + testRunFilters);
        }
    );
}

正在触发 updateTestRunFilter 中的 console.log，所以我不确定这里有什么问题？

我也无法让它与 Map 一起工作，例如@observable testRunFiltersMap = new Map();

Answer 1

你的reaction错了。现在的方式，它只会在您完全更改数组（新参考）时触发。为了触发反应，你需要watch为length属性数组。但是，现在传递给副作用的参数将只是数组长度。

   myReaction = reaction(
        () => this.testRunFilters.length,
        (thisIsLengthNow) => {
            console.log('Hello!' + testRunFilters);
        }
    );

但是您总是可以从 reaction 中 return 更多内容，或者只是访问具有 this.testRunFilters 副作用的数组。

添加到可观察数组时，mobx 反应无法触发

mobx reaction is failing to trigger when adding to an observable array

reactjs

mobx

mobx-react