使用Mbox管理数据，发现利用@action来改变属性的值，组件却没有重新渲染

最近在学习使用mbox，遇到一个问题：利用mobx定义的store，在组件中使用相应@action改变了@obsevable监听的属性值，但是页面没有即时渲染。

先看数据发生改变，组件没有实时更新的代码：

// 新建的store.js

import moment from 'moment';
import { action, observable } from "mobx";
class clusterAuditStore{

    // 可观察的
    @observable datePick;
    @observable clusterId;
    @observable filterData;

    constructor() {
        this.clusterId = -1;
        this.datePick = [moment().subtract(30, 'm'), moment()];
        this.filterData={};
    }

    // 对相关属性做出的动作
    @action setDatePick(datePick){
        console.log(`改变 datePick`, datePick)
        this.datePick = datePick;
    }
    @action setClusterId(clusterId) {
        console.log(`改变 clusterId`, clusterId)
        this.clusterId = clusterId;
    }
    @action setFilterData(filterData) {
        console.log(`改变 filterData`, filterData)
        this.filterData = filterData;
    }
}
export default new clusterAuditStore();

// 这里是使用store的组件
import React from "react";
import moment from 'moment';
import { DatePicker } from "antd";
import { inject, observer } from "mobx-react";

const { RangePicker } = DatePicker;

function Investigate(props) {
    let { clusterAuditStore } = props;
    return (
        <div>
            <RangePicker
                allowClear={false}
                value={clusterAuditStore.datePick}
                onChange={(val) => {
                    clusterAuditStore.setDatePick(val);
                }}
                showTime
            />
        </div>
    )
}
export default inject('clusterAuditStore')(observer(Investigate));

正确的代码：

// 新建的store.js
import moment from 'moment';
import { action, observable, makeObservable } from "mobx";
class clusterAuditStore{

    // 可观察的
    @observable datePick;
    @observable clusterId;
    @observable filterData;

    constructor() {
        this.clusterId = -1;
        this.datePick = [moment().subtract(30, 'm'), moment()];
        this.filterData={};
        // 使用makeObservable来实时更新组件
        makeObservable(this);
    }

    // 对相关属性做出的动作
    @action setDatePick(datePick){
        console.log(`改变 datePick`, datePick)
        this.datePick = datePick;
    }
    @action setClusterId(clusterId) {
        console.log(`改变 clusterId`, clusterId)
        this.clusterId = clusterId;
    }
    @action setFilterData(filterData) {
        console.log(`改变 filterData`, filterData)
        this.filterData = filterData;
    }
}
export default new clusterAuditStore();