数组搭配for循环处理的踩坑记录

项目中需要根据接口返回的数据实现动态渲染，同时根据相同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));
    }