Mobx Observable 未触发更改答案

【问题标题】：Mobx Observable not triggering changesMobx Observable 未触发更改
【发布时间】：2018-03-28 04:22:45
【问题描述】：

我一直在努力将 MobX 实现到我的一个课程中，我相信我已经接近让它工作了，但如果有人能指出我在这里出错的地方，我将不胜感激。

基本上当 refreshJobs() 函数运行时，我希望 render() 函数再次执行。据我了解，如果我更新了可观察对象 jobs，计算函数（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>;
    }
}

【问题讨论】：

标签： react-native mobx

【解决方案1】：

这里有几个错误：

您不能为可观察变量重新分配另一个值，它会破坏可观察变量。你需要改变 observable。例如，您可以直接为现有属性赋值或使用extendObservable 为可观察对象分配新属性。
如果您使用 MobX extendObservable 可能有效，但也有限。改用 observable Map。
@observer 应该用于组件类（或 SFC），而不是类内部的成员函数

【讨论】：