react mobx, component does not render new observable

Question

I am using Mobx with React (typescript) to get some data from firebase and display it. at the first render no data is rendered on the screen till I change for instance tabs in view that the component get re-rendered.

the component class:

interface Props {id: string; mytore?: MyStore;}
@inject('mystore')
@observer
export class myClass extends Component<Props>{
  constructor(props: Props) {super(props);}
  componentDidMount() {   this.props.mystore!.getBs(this.props.id);}
  render() {
     const { arrB } = this.props.mystore!;
     return (
        <div>{arrB.map((e) => (<h3 key={`${e.id}`}>{e.name}</h3>))}</div>
        );
     }
}

the store class
```
export class MyStore{
@observable arrA=[];
@observable arrB=[];

constructor(){this.loadAllAs()}

@action.bound loadAllAs(){runInAction(async()=>(this.arrA=await /*fetchfunction*/))}

@action getBs(id){this.arrB=arrA.filter(/*some logic*/)}
}
```
so here the arrB gets manipulated after calling the method, and it is an observable which get destructures at render method of the component so I was expecting any changes to the arrB result in a re-render but nothing happens till regarding other actions componentDidMount gets called.

epodgaetskiy epodgaetskiy · Accepted Answer · 2018-12-09T12:04:10

Because arrB must be @computed computed

@computed
getBs(id){
   return this.arrA.filter(/*some logic*/)}
}

const { getBs } = this.props.mystore!;

getBs(id).map...

react mobx, component does not render new observable

1 Answers