代码之家 › 专栏 › 技术社区 › Amir-Mousavi

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

mobx-state-tree mobx-react reactjs

0

Amir-Mousavi · 技术社区 · 7 年前

我使用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方法处获取destructures,因此我希望对结果在重新渲染,但没有发生任何事情,直到关于其他行动 componentDidMount 接到电话。

1 回复 | 直到 7 年前

1

0

epodgaetskiy 7 年前

因为arrB必须@computed computed

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

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

getBs(id).map...