反应mobx，组件不呈现新的可观察的

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在调用该方法后被操作，它是一个可观察的，在组件的render方法中得到析构函数，所以我预计arrB的任何更改都会导致重新render，但在调用其他操作componentDidMount之前，什么都不会发生。

Answer 1

因为arrB必须是@computed计算

@computed
getBs(id){
return this.arrA.filter(/*some logic*/)}
}
const { getBs } = this.props.mystore!;
getBs(id).map...