项目中需要根据接口返回的数据实现动态渲染,同时根据相同url的查询字符串后面的参数进行判断,有某个参数就动态渲染,没有的话就不需要进行动态渲染。
因为使用的是同一个页面,所以在渲染组件时进行了判断。(因为组件渲染需要时间,所以初始值按照多的动态条件来进行组织,然后在不需要动态条件的判断中将其删除)。
问题分析及解决:
犯错原因:
主要就是在for循环中又对原数组进行了修改,导致页面加载异常。(for循环是需要对后端返回的数据组织成前端需要的数据,且需要根据条件有些不同的处理)
解决:
在for循环之后再根据不同的条件处理数组。
(实际解决过程中因为页面中错误提示并没有定位到此处,只是页面中动态条件部分表现异常,所以只能按照代码一块一块的进行分析,消耗了一些时间,多么痛的领悟。。)
教训:
不能在循环过程中再对原数据进行操作!
代码部分:
× 之前错误的写法:
if (isArray(columns)) {
columns.forEach((c: any) => {
c.fieldProps = fieldProps[c.dataIndex] ?? {};
if(c.dataIndex === 'sci'){
c.title = subTitle;
if(subTitle === '科学'){
c.formItemProps.rules[0].required = false;
}
}
......
if(c.dataIndex === 'unit' && subTitle == '科学'){
columns.splice(index,1); // 不可在内部操作原数组
}
});
}
√ 修改之后的代码:
if (isArray(columns)) {
columns.forEach((c: any) => {
c.fieldProps = fieldProps[c.dataIndex] ?? {};
if(c.dataIndex === 'sci'){
c.title = subTitle;
if(subTitle === '科学'){
c.formItemProps.rules[0].required = false;
}
}
......
// 不可在for循环内部进行处理
});
}
if(subTitle === '科学'){
// 过滤出需要的数据
const newColumns = columns.filter((c: any) => c.dataIndex !== 'unit');
setData(newColumns); // 设置数据
}else{
setData(cloneDeep(columns));
}