首先,需要在调用SWR时指定数据获取成功后的处理函数。在这个函数中,将返回的数据格式进行转换,以符合Antd Cascader组件的要求。例如,将从API获取到的数据:
[
{
"value": "1",
"label": "parent",
"children": [
{
"value": "2",
"label": "child"
}
]
}
]
转换为Antd Cascader组件可以识别的格式:
[
{
"value": "1",
"label": "parent",
"children": [
{
"value": "2",
"label": "child",
"isLeaf": true
}
]
}
]
可以看到,转换后的数据结构新增了一个“isLeaf”的属性,用于标识当前节点是否是叶子节点。当节点存在子节点时,该属性应设置为false,否则设置为true。
完整代码示例:
import { Cascader } from 'antd';
import useSWR from 'swr';
const fetchData = (url) => fetch(url).then(res => res.json());
const formatData = (data) => {
return data.map(item => {
const { children, ...rest } = item;
return {
...rest,
isLeaf: !children || children.length === 0,
children: children ? formatData(children) : undefined,
};
});
}
export default function Example() {
const { data } = useSWR('/api/data', fetchData);
const options = data ? formatData(data) : [];
return (
);
}