reactjs - 反应 mobx，组件不呈现新的 observable

Question

我正在使用 Mobx 和 React (typescript) 从 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
getBs(id){
   return this.arrA.filter(/*some logic*/)}
}

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

getBs(id).map...