Error: [mobx] Computed values are not allowed to cause side effects by changing observables that are already being observed. Tried to modify:

Viewed 1373

I'm trying to add and remove upload gifs for a filtering event

Where did I fail?

    @observable loading = false; //Loading variable being tracked in component
    @computed get filtered() {
    this.loading=true;//true
    let filteredList = this.list.filter(
      item => item.data.some(
        obj => obj.tr_x.toLowerCase().includes(this.filterTermValue)
      )
    );
    this.loading=false;//false
    if (filteredList.length)
      return filteredList;
    return this.list;
  }
1 Answers

What is a @computed decoration?

It is a kind of cache. If the arguments does not change, do not compute, just return the previous computed value.

So as good practice to avoid side effects those @computed functions can not change anything, just compute idempotent information.

And you need to look to your stack call to ensure the code that change any property are not called by a @computed function.

Related