项目场景:
在公司的一个项目中需要使用循环更改查询条件,然后查询子表数据,但是在查询过程中for下面的key变化了之后,查询中的key却并没有变化,导致查询的参数不一致,从未结果数据出错
for(let i = 0;i<length;i++){
let record = this.state.AllDate.CurvedataHVO_list.rows[i].values
var key = record.pk_curvedata.value
// console.log(key)
this.state.list.tablelist.tablelistRow = {values: record};
this.querySlaveData({
callback: (data) => {
// console.log('发起请求')
var mydata = {data}
if ( !( key in this.state.chosedLine ) ) {
//echarts表格
var xValue = []
var yValue = []
for(const item of mydata.data.CurvedataBVO_sub.rows){
yValue.push( (item.values.rate.value | 0 ) / 100)
xValue.push( (item.values.term_days.value | 0) + '天' )
}
this.state.chosedLine[key] = [xValue,yValue,record.name.value]
}else{
delete this.state.chosedLine[key]
}
}
})
}
原因分析:
在循环过程中发起请求,因为请求有延迟,导致两次key取的是同一个数,所以最终数据出错
解决方案:
使用使用立即执行声明函数(IIFE)来确保请求中的 key
值与循环中的 key
值一致。
IIFE介绍:
IIFE(立即执行函数表达式)是一种在定义后立即执行的 JavaScript 函数。它通常用于创建一个私有的作用域,避免变量污染全局作用域,以及执行一些初始化操作。IIFE 的基本语法是将一个匿名函数包裹在圆括号中,然后紧接着的另一对圆括号会立即执行这个函数。
for(let i = 0;i<length;i++){
let record = this.state.AllDate.CurvedataHVO_list.rows[i].values
var key = record.pk_curvedata.value
// console.log(key)
this.state.list.tablelist.tablelistRow = {values: record};
((record, key) => {
this.querySlaveData({
callback: (data) => {
// console.log('发起请求')
var mydata = {data}
if ( !( key in this.state.chosedLine ) ) {
//echarts表格
var xValue = []
var yValue = []
for(const item of mydata.data.CurvedataBVO_sub.rows){
yValue.push( (item.values.rate.value | 0 ) / 100)
xValue.push( (item.values.term_days.value | 0) + '天' )
}
this.state.chosedLine[key] = [xValue,yValue,record.name.value]
}else{
delete this.state.chosedLine[key]
}
}
});
})(record, key);
}