Ant Design Cascader：错误未在选项中找到值

Question

我想使用“Ant Design”的“Cascader”组件，但无法用数据填充它。这是我的代码，我做错了，对不起，我还是个新手，我需要你的支持。

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

Answer 1

在 options

中找不到 value

每当我在任何级别有一个空数组 children 时，我都能用虚拟数据重现你的错误。我不确定为什么这应该是一个问题，但确实如此。所以你需要修改你的映射函数来检查 child 数组的长度。如果没有 children.

，传递 undefined 而不是空数组似乎没问题

一般建议

当您从 redux 获取选项时，您不需要将它们存储在组件状态中。它可以只是一个派生变量。您可以使用 useMemo 来防止不必要的重新计算。

您在 props 中传递了整个 loginReducer 状态，这并不理想，因为如果您实际未使用的值发生变化，它可能会导致 re-renders 无用。所以你想最小化你从 redux 中 select 的数据量。只是 select empresas.

修改后的代码

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" />;
}

Answer 2

“选项”对象的最终代码：

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