Question

我一直在努力将MobX应用到我的一个课程中，我相信我已经接近了它的工作但我真的很感激，如果有人可以指出我在哪里出错了。

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

然而，这段代码会发生的事情是它更新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>;
    }
}

Answer 1

这里的错误很少：

你不能将另一个值重新赋值给observable变量，它会破坏observable。你需要改变观察者。例如，您可以直接将值分配给现有属性，或使用extendObservable将新属性分配给可观察对象。
如果您使用MobX＆lt; 4，添加新属性时，可观察对象不会触发更改，因为在创建可观察对象时设置了属性。 extendObservable可能有效，但也有限。请改用可观察的地图。
@observer应该用于组件类（或SFC），而不是类中的成员函数

Mobx Observable不会触发更改

1 个答案: