React native Mobx可观察到不触发更改

我一直在努力在我的一个类中实现MobX，我相信我很快就能让它工作了，但如果有人能指出我在这里的错误，我将非常感激

基本上，当refreshJobs（）函数运行时，我希望render（）函数再次执行。根据我的理解，如果我更新了可观察对象作业，则计算函数（renderSubmittedJobs（），renderProgressJobs（））将再次运行，生成新值，然后由于这些值已更新，渲染函数将再次运行

但是，这段代码会更新this.jobs（包装在一个动作中），但两个计算函数都不会执行——我相信这就是为什么渲染也不会再次运行的原因

有人知道是什么导致了这个问题吗？我真的很欣赏这方面的任何指导

@observer
export default class Jobs extends React.Component<ScreenProps<>> {

    @observable jobs = {};

    @computed get renderInProgressJobs() {
        inProgressJobs = [];
        for (key in this.jobs) {
            if (jobs[key].status === "in progress") {
                inProgressJobs.push(this.jobs[key]);
            }
        }
        return this.renderJobComponents(inProgressJobs);
    }

    @computed get renderSubmittedJobs() {
        submittedJobs = [];
        for (key in this.jobs) {
            console.log(key)
            if (this.jobs[key].status !== "in progress") {
                submittedJobs.push(this.jobs[key]);
            }
        }
        return this.renderJobComponents(submittedJobs);
    }

    renderJobComponents(jobList: Array) {
      return jobList.map((jobInfo, key) => {
        return (
          ...
        );
      });
    }

    @observer
    async refreshJobs() {
        jobs = await grabClientJobs(refresh=true);
        await runInAction("Updating Jobs", async () => {
            this.jobs = jobs;
        });
    }

    @observer
    async componentWillMount() {
        jobs = await grabClientJobs();
        runInAction("Updating Jobs", async () => {
            this.jobs = jobs;
        });
    }

    @observer
    render(): React.Node {

        console.log('in jobs now');
        return <BaseContainer title="Jobs" navigation={this.props.navigation} scrollable refresh={this.refreshJobs}>
            <Tabs renderTabBar={()=> <ScrollableTab />} tabBarUnderlineStyle={style.secondaryBackground}>
             <Tab heading="In Progress" textStyle={style.tabTextStyle} activeTextStyle={style.activeTabTextStyle}>
               { this.renderInProgressJobs }
               <Button full style={[style.secondaryBackground, style.newJob]}>
                 <Text>CREATE NEW JOB</Text>
               </Button>
             </Tab>
             <Tab heading="Submitted" textStyle={style.tabTextStyle} activeTextStyle={style.activeTabTextStyle}>
               { this.renderSubmittedJobs }
             </Tab>
           </Tabs>
        </BaseContainer>;
    }
}

@observer
导出默认类作业扩展React.Component{
@可观察作业={}；
@计算的get RenderProgressJobs（）获取{
inProgressJobs=[]；
for（输入此.jobs）{
如果（作业[key]。状态==“正在进行”）{
inProgressJobs.push（this.jobs[key]）；
}
}
返回此.renderJobComponents（inProgressJobs）；
}
@计算得到的get renderSubmittedJobs（）{
提交的Jobs=[]；
for（输入此.jobs）{
console.log（键）
如果（此.jobs[key].status！=“正在进行”）{
submittedJobs.push（this.jobs[key]）；
}
}
返回此.renderJobComponents（submittedJobs）；
}
renderJobComponents（作业列表：阵列）{
返回jobList.map（（jobInfo，key）=>{
返回(
...
);
});
}
@观察者
异步刷新作业（）{
作业=等待抓取客户端作业（刷新=真）；
等待runInAction（“更新作业”，异步（）=>{
这个.工作=工作；
});
}
@观察者
异步组件willmount（）{
jobs=等待抓取ClientJobs（）；
运行不活动（“更新作业”，异步（）=>{
这个.工作=工作；
});
}
@观察者
render（）：React.Node{
log（“立即登录作业”）；
返回
}tabBarUnderlineStyle={style.secondaryBackground}>
{this.renderInProgressJobs}
创造新工作
{this.renderSubmittedJobs}
;
}
}

这里几乎没有错误：

你不能给可观察变量重新赋值，它会破坏可观察变量。你需要改变可观察的事物。例如，您可以直接将值指定给现有属性，或使用

extendObservable

将新属性指定给可观察对象

如果使用MobX<4，则向可观察对象添加新属性不会触发更改，因为这些属性是在创建可观察对象时设置的

extendObservable

可以工作，但也有局限性。使用可观察地图代替

@observer应该用于组件类（或SFC），而不是类内部的成员函数