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在调用方法后被操纵，并且可以观察到它在组件的render方法处发生了结构分解，因此我期望对arrB进行任何更改都会导致重新呈现，但在调用其他动作componentDidMount之前什么也没有发生。

Answer 1

因为必须对arrB进行@computing computed

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

反应mobx，组件无法呈现新的可见

1 个答案: