reactjs - AntDesign Cascader: error Valor no encontrado en las opciones

Quiero utilizar la función "Cascader" componente de "Diseño de hormigas" pero tengo problemas para llenarlo de datos. Este es mi código, que estoy haciendo mal. Lo siento, todavía soy un novato y necesito su ayuda, por favor.

function CascaderEmpCliUn(props) {
    const optionLists = { a: []}
    const [state, setState] = useState(optionLists);

    useEffect(() => {
        async function asyncFunction(){
            const empresas = await props.loginReducer.data.empresas;
            const options = [
                empresas.map(empresa => ({
                    value: empresa.id,
                    label: empresa.siglas,
                    children: [
                        empresa.cli_perm.map(cliente => ({
                            value: cliente.id,
                            label: cliente.siglas,
                            children: [
                                cliente.uunn_perm.map(un => ({
                                    value: un.id,
                                    label: un.nombre,
                                }))
                            ]
                        }))
                    ]})
                )
            ];
            setState({a : options})
        }
        asyncFunction();
    }, [])

    return (
        <Cascader options={state.a} placeholder="Please select" />
    )
}

ERROR

------------------------------------

Valor no encontrado en opciones

Pude reproducir su error con datos ficticios siempre que tenía una matriz vacía de niños en cualquier nivel. No estoy seguro de por qué esto debería ser un problema, pero lo es. Por lo tanto, debe modificar su función de mapeo para verificar la longitud de las matrices secundarias. Parece estar bien si paso indefinido en lugar de una matriz vacía.Si no hay niños.

Sugerencias generales

No es necesario almacenar las opciones en el estado del componente cuando las obtienes de redux. Puede ser simplemente una variable derivada. Puede utilizar useMemo para evitar recálculos innecesarios.

Estás pasando todo el estado de loginReducer en tus accesorios, lo cual no es ideal porque podría causar renderizaciones inútiles si cambian valores que en realidad no estás usando. Entonces desea minimizar la cantidad de datos que selecciona de redux. Sólo selecciona las empresas.

Código revisado

function CascaderEmpCliUn() {
    // you could do this with connect instead
    const empresas = useSelector(
        (state) => state.loginReducer.data?.empresas || []
    );

    // mapping the data to options
    const options = React.useMemo(() => {
        return empresas.map((empresa) => ({
            value: empresa.id,
            label: empresa.siglas,
            children:
                empresa.cli_perm.length === 0
                    ? undefined
                    : empresa.cli_perm.map((cliente) => ({
                        value: cliente.id,
                        label: cliente.siglas,
                        children:
                            cliente.uunn_perm.length === 0
                                ? undefined
                                : cliente.uunn_perm.map((un) => ({
                                    value: un.id,
                                    label: un.nombre
                                }))
                    }))
        }));
    }, [empresas]);

    return <Cascader options={options} placeholder="Please select" />;
}

2

1

Gracias por tu ayuda, tu código se compila correctamente, salvo una pequeña corrección en el objeto "opciones", unos corchetes innecesarios que puse en el primer y segundo hijo, la novedad para mí es que "mapa" No necesita que pongamos corchetes para crear arrays.

– José Guzmán

28 de marzo de 2021 a las 6:52

@JoséGuzmán ¡Debería haberme dado cuenta! Sí, no necesitas corchetes porque .map ya devuelve una matriz.

Linda Paiste

28/03/2021 a las 19:55

------------------------------------

El código final de "opciones" objeto:

const options = useMemo(() => {
        return empresas.map((empresa) => ({
            value: empresa.id,
            label: empresa.siglas,
            children:
                empresa.cli_perm.length === 0
                    ? console.log("undefined")
                    :
                        empresa.cli_perm.map((cliente) => ({
                            value: cliente.id,
                            label: cliente.siglas,
                            children:
                                cliente.uunn_perm.length === 0
                                    ? console.log("undefined")
                                    :
                                        cliente.uunn_perm.map((un) => ({
                                            value: un.id,
                                            label: un.nombre
                                        }))

                        }))

        }));
    }, [empresas]);