如何解决在严格模式下无法更新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: Businessstore@9.expenseChartData
▶ 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内部运行。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。