Cascader --- [Vue warn]: Prop no válido: la verificación del validador personalizado falló para las "opciones" de prop. Vue 解 绑

Antecedentes: VUE + antdesign (selector en cascada);

1. Advertencia de la consola: [Vue warn]: accesorio no válido: la verificación del validador personalizado falló para las "opciones" del accesorio
2. Los niños en cascada-niños están vacíos, mostrando elementos en blanco

Código oficial

<template>
  <a-cascader :options="options" placeholder="Please select" @change="onChange" />
</template>
<script>
export default {
  data() {
    return {
      options: [
        {
          value: 'zhejiang',
          label: 'Zhejiang',
          children: [
            {
              value: 'hangzhou',
              label: 'Hangzhou',
              children: [
                {
                  value: 'xihu',
                  label: 'West Lake',
                },
              ],
            },
          ],
        },
        {
          value: 'jiangsu',
          label: 'Jiangsu',
          children: [
            {
              value: 'nanjing',
              label: 'Nanjing',
              children: [
                {
                  value: 'zhonghuamen',
                  label: 'Zhong Hua Men',
                },
              ],
            },
          ],
        },
      ],
    };
  },
  methods: {
    onChange(value) {
      console.log(value);
    },
  },
};
</script>

Los datos devueltos por la interfaz de back-end se rellenaron directamente y se encontró que había un espacio vacío. Más tarde, utilizando la prueba de instancia oficial, se descubrió que tal situación ocurriría cuando los niños tuvieran [], luego resuelve el problema de forma recursiva

// 格式化数据，递归将空的children置为undefined
  formatData(data: any) {
    const that = this
    data.forEach((element: any) => {
      if (element.children && element.children.length > 0) {
        that.formatData(element.children)
      } else {
        element.children = undefined
      }
    })
    return data
  }

En este momento, se ha mostrado la página, pero ¿por qué hay una advertencia en la consola? ? ? Es insoportable para el trastorno obsesivo compulsivo. Después de algunas operaciones, se encuentra que los
tipos de datos son inconsistentes debido al enlace bidireccional, por lo que es necesario desvincular:
poner otra capa en el exterior de los datos.
JSON.parse (JSON.stringify (this.formatData (matriz de datos convertida))) || []
¿Por qué son inconsistentes? Descargo Observar y objetar en Baidu; lo escribiré con urgencia, lo explicaré nuevamente cuando tenga tiempo ~