在严格模式下无法更新mobx存储中的空数组

问题描述

当我尝试更新mobx存储中的可观察数组时，即使我在操作下包装了突变，也遇到了以下错误。 （runInAction（）方法）。
Mobx版本（5.5.14）和mobx反应（6.2.2）

    Error: [mobx] Since strict-mode is enabled,changing observed observable values outside actions is 
not allowed. Please wrap the code in an `action` if this change is intended. 
Tried to modify: [e-mail]
▶ 33 stack frames were collapsed.
BusinessStore.handleExpenseMetrics
/stores/businessStore.js:188
  185 |         this.dashboardMetrics.totalExpenses = metricObj.totalExpenses
  186 |      })
  187 |       
> 188 |      runInAction(()=>{
      | ^  189 |         this.expenseChartLabels = metricObj.expenseChartLabels
  190 |      }) //this is just short fix for updates for many arrays in objects
  191 | 

这是仪表盘代码调用操作的样子。

- Dashboard.jsx.
loadExpenseMetrics(inputDetails)
       .then(result=>{
          const totalExpenses =  calculateTotalExpense(result.chartData)
          
          const updateMetrics = {
             totalExpenses:totalExpenses,expenseChartLabels:result.labels,// ["Travel","Office","Food"]
             expenseChartData:result.chartData // [30000,560000,89000]
          }
          this.props.bizStore.handleExpenseMetrics(updateMetrics)
        })

这就是可观察数组的初始化方式。

//businessStore.
      @observable expenseChartLabels =  []
      @observable expenseChartData = []
      @observable dashboardLoaded = false

      @observable dashboardMetrics = {
         totalRevenue: 0,totalExpenses: 0,totalCostSales: 0,saleOrderRevenue: 0,saleOrderCosts: 0,metricPeriod: 'Today'
      }
      
      handleExpenseMetrics(metricObj){
          runInAction(()=>{
             this.dashboardMetrics.totalExpenses = metricObj.totalExpenses
          })
       
          runInAction(()=>{
             this.expenseChartLabels = metricObj.expenseChartLabels
          }) //facing th error here... help with fix for it without removing the strict mode,runInAction(()=>{
             this.expenseChartData = metricObj.expenseChartData
          })
      }

令人惊讶
仅对于可观察到的数组会出现此问题，而对于正常的字符串和数字不会出现此问题。实际上，以下代码可以很好地运行，但是它涉及多个状态值，可以对其进行修改。

@action handleDashboardMetrics(metricsObj){

      runInAction(()=>{
         let dashMetrics = this.dashboardMetrics;
         dashMetrics.totalRevenue = metricsObj.totalRevenue
         dashMetrics.totalCostSales = metricsObj.totalCostSales
         dashMetrics.metricPeriod  = metricsObj.metricPeriod  
      })
   }

解决方法

嗯，这很奇怪。根据您的代码判断，一切正常，我实际上尝试在沙箱中重现它，但不能（看着控制台，那里没有错误）

您可以检查的一件事是MobX版本，您使用的是最新版本吗？也许这是某些旧版本中的错误？

此外，这里实际上不需要使用runInAction，因为您可以将函数包装在@action装饰器中，如下所示：

      @action
      handleExpenseMetrics(metricObj){
          this.dashboardMetrics.totalExpenses = metricObj.totalExpenses
          this.expenseChartLabels = metricObj.expenseChartLabels
          this.expenseChartData = metricObj.expenseChartData
      }

然后，函数体内的所有同步代码将在action内部运行。