时间戳

首页 > 解决方案 > AntDesign Cascader：错误未在选项中找到值

reactjs - AntDesign Cascader：错误未在选项中找到值

问题描述

我想使用“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" />
    )
}

错误

标签： reactjsreduxcomponentsantd

解决方案

value未找到options

每当我有children任何级别的空数组时，我都能够使用虚拟数据重现您的错误。我不确定为什么这应该是一个问题，但确实如此。所以你需要修改你的映射函数来检查子数组的长度。undefined如果没有孩子，如果传递而不是空数组似乎很好。

一般建议

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

您在 props 中传递了整个loginReducer状态，这并不理想，因为如果值发生更改而您实际上并未使用，它可能会导致无用的重新渲染。因此，您希望尽量减少从 redux 中选择的数据量。只需选择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" />;
}

推荐阅读