реагирует mobx, компонент не делает новые наблюдаемые

Question

Я использую Mobx с React (машинопись), чтобы получить некоторые данные из firebase и отобразить их.при первом рендеринге данные не отображаются на экране до тех пор, пока я не изменю вкладки экземпляра, так как компонент будет перерисован.

• класс компонента:

  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>
          );
       }
  }
  

• класс хранилища

  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*/)}
  }
  

  , поэтому здесь arrB манипулируется после вызова метода, и это является наблюдаемой, которая получает разрушения при методе рендеринга компонента, поэтому я быложидание любых изменений в arrB приведет к повторному рендерингу, но ничего не произойдет, пока не будут вызваны другие действия componentDidMount.

Answer 1

Поскольку arrB должен быть @computed computed

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

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

getBs(id).map...