Antd v4 Cascader 组件异步加载数据，初始化无法展示问题

antd v4.24.4

在业务中，有使用级联选择器异步获取数据的场景，基于选中的第一级内容，异步请求加载第二级内容，官方文档也给出了使用 loadData 参数支持这种场景。

问题

这种方式带来的一个问题就是：loadData 是交互触发的，不会自动运行，意思就是，当初始化展示数据的时候，无法通过主动触发 loadData 来实现数据的映射展示

解决方法

通过 Cascader 的 displayRender 参数，手动处理第一次展示的问题 。displayRender 属性是选择后展示的渲染函数，以下是实现的伪代码

const CustomCascader = props => {
    const { initValue, options, value } = props;
    
    const [fetched, setFetched] = useState(false);
    const [defaultLabel, setLabel] = useState<string[]>([]);
    
    const loadData = () => {
        ...
        setFetched(true);
    }

    useEffect(() => {
        if (!fetched && initValue && initValue.length > 0) {
            const [level1, level2] = initValue;
            fetch(level2).then(data => {
                const level1_label = options.find(item => item.value === level1);
                const level2_label = data.find(item => item.value === level2);
                setLabel([level1_label, level2_label])
            })
        }
    }, [])

    const displayRender = (label: string[]) => {
        if (fetched) {
            return label.join(' / ');
        }
        return defaultLabel.join(' / ');
    };

    return (
        <Cascader
            options={options}
            loadData={loadData}
            value={value}
            displayRender={displayRender}
        />
    );
	
}

该方法是参考了 issues 中给出的例子，补充了异步请求的步骤。不过这个方法还是不太完美，使用时需要注意