iView Cascader 级联选择器怎么动态加载数据？

你这问题挺典型的，我先说一个可能的坑：你确认 data 里的 value 是字符串还是数字？iView 的 Cascader 对 value 类型比较敏感，得是 string。

如果数据已经一次性全部返回了，你那么写应该没问题。你先 console.log 一下 data，看看拿到的到底是啥。

假设你数据确实拿到了但就是渲染不出来，试试这样：

const [options, setOptions] = useState([]);



useEffect(() => {

  fetch('/api/regions')

    .then(res => res.json())

    .then(data => {

      // 确保 value 是字符串

      const formatData = (list) => {

        return list.map(item => ({

          value: String(item.value),

          label: item.label,

          children: item.children ? formatData(item.children) : []

        }));

      };

      setOptions(formatData(data));

    });

}, []);

如果你是想实现点击展开时才加载下一级（懒加载），那得用 loadData 属性，像这样：

const [options, setOptions] = useState([]);



const loadData = (selectedOptions) => {

  const targetOption = selectedOptions[selectedOptions.length - 1];

  targetOption.loading = true;

  

  fetch(/api/regions/${targetOption.value})

    .then(res => res.json())

    .then(data => {

      targetOption.children = data.map(item => ({

        value: item.value,

        label: item.label,

        children: item.hasChildren ? [] : undefined // 有子节点就设空数组，触发懒加载

      }));

      targetOption.loading = false;

      setOptions([...options]);

    });

};



return <Cascader options={options} loadData={loadData} />;

懒加载的关键是：子节点的 children 要么不设，要么设空数组，有子节点时才会在点击时触发 loadData。

你先试试第一种，看是不是 value 类型的问题。