MboX + ReactECharts 不更新数据 作者: Chuwen 时间: 2022-01-12 分类: React tsx 如下： ``` <ReactECharts option={this.props.shipmentsLookupsChartStore?.getOptions}/> ``` store 如下: > 如果按照以下 `setOptionsData` 就会出现问题，数据已经给了，但是视图不会更新 ```ts import {action, computed, makeObservable, observable} from "mobx"; export default class ChartStore implements IChart { @observable public options = ChartOption; constructor() { makeObservable(this) } @computed get getOptions(): any { return this.options } @action.bound setOptionsData(data: ChartOptionsData): void { // 设置 x 轴数据 if (this.options?.xAxis[0]?.data) { this.options.xAxis[0].data = data.xAxisData; } } } ``` ### 解决办法 > 原因是深浅克隆的原因，仅作为记录，不保证我说的一定是正确的 首先安装 `lodash`，`setOptionsData` 方法改为如下，就可以正常运行了： ```ts @action.bound setOptionsData(data: ChartOptionsData): void { //深度克隆数据 const newOption = cloneDeep(this.options) // 设置 x 轴数据 if (this.options?.xAxis[0]?.data) { newOption.xAxis[0].data = data.xAxisData } this.options = newOption } ``` 标签: React