Registros pisoteados procesados por arreglos y bucles for

El proyecto debe implementar una representación dinámica basada en los datos devueltos por la interfaz y, al mismo tiempo, juzgar de acuerdo con los parámetros detrás de la cadena de consulta de la misma URL. Si hay un parámetro determinado, se representará dinámicamente. Si hay no es ningún parámetro, no se requerirá renderizado dinámico.

Debido a que se usa la misma página, el juicio se realiza cuando se representa el componente. (Debido a que la representación de componentes lleva tiempo, el valor inicial se organiza de acuerdo con muchas condiciones dinámicas y luego se elimina en el juicio que no necesita condiciones dinámicas).

Análisis y solución del problema:

Motivo del error:

La razón principal es que la matriz original se modifica en el bucle for, lo que hace que la página se cargue de manera anormal. (El ciclo for necesita organizar los datos devueltos por el backend en los datos que necesita el frontend, y debe procesarse de manera diferente según las condiciones)

resolver:

Después del ciclo for, la matriz se procesa de acuerdo con diferentes condiciones.

(En el proceso de solución real, debido a que el mensaje de error en la página no se encuentra aquí, pero la parte de la condición dinámica de la página es anormal, por lo que solo se puede analizar uno por uno de acuerdo con el código, lo que consume algo de tiempo, lo que una comprensión dolorosa...)

lección:

¡Los datos originales no se pueden operar durante el ciclo!

parte del código:

× Forma incorrecta de escribir antes:

    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);  // 不可在内部操作原数组
        }
      });
    }

√ Código modificado:

    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));
    }