Mobx可观察对象未触发更改

Question

我一直在努力将MobX引入我的一个类中，我相信我已经接近成功了，但如果有人能指出我错在哪里，我会非常感激。

基本上，当refreshJobs()函数运行时，我希望render()函数再次执行。据我所知，如果我更新了可观察对象jobs，那么计算函数(renderSubmittedJobs()，renderInProgressJobs())将再次运行生成新值，然后由于这些值已被更新，render函数将再次运行。

然而，这段代码发生的情况是它更新了this.jobs(封装在一个action中)，但是两个计算函数都没有执行，我认为这就是为什么render函数也没有运行的原因。

有人知道可能是什么原因导致了这个问题吗？我非常感谢任何对此的指导。

@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>;
    }
}

- wolverine239

Answer 1

这里有一些小错误：

1. 你不能重新分配另一个值给observable变量，它会销毁observable。你需要改变observable。例如，你可以直接为现有属性分配值或使用extendObservable为observable对象分配新属性。

2. 如果你使用的是MobX < 4，向observable对象添加新属性不会触发更改，因为在创建observable对象时设置了属性。extendObservable可能起作用，但也有限制。使用observable Map代替。

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

- XPX-Gloom