antd的cascader动态加载需要点击两下才会加载子级数据，而且加载的是第一次请求的数据？

Question

  // 第二级
  const [guardParams, setGuardarams] = useState([]);
  const { data: selectSecondData, loading: selectSecondLoading, run: selectSecondRun, error: selectSecondError } = useRequest(selectSecond, {
    manual: true,
    onSuccess: res => {
      setGuardarams(res.data.list);
    },
  });
  if (selectSecondError) {
    message.error(selectSecondError);
  }

  // 第三级
  const [modelParams, setModelarams] = useState([]);
  const { data: selectThirdData, loading: selectThirdLoading, run: selectThirdRun, error: selectThirddError } = useRequest(selectThird, {
    manual: true,
    onSuccess: res => {
      setModelarams(res.data.list);
    },
  });
  if (selectThirddError) {
    message.error(selectThirddError);
  }

  const secondData = selectSecondData?.data.list
  const thirdData = selectThirdData?.data.list

const loadData = (selectedOptions: any) => {
    const targetOption = selectedOptions[selectedOptions.length - 1];
    const id = targetOption.value;
    if(selectedOptions.length === 1) {
      selectSecondRun(id);
      if( secondData !== undefined) {
        targetOption.children = [];
        secondData.forEach((element: any) => {
          targetOption.children.push({
            "value": element.id,
            "label": element.name,
            "isLeaf": false,
          })
        });
        setAppParams(targetOption)
      }else{
        console.log("hahahha")
      }
    } else if(selectedOptions.length === 2) {
      selectThirdRun(id)
      targetOption.children = [];
      if(thirdData !== undefined) {
        thirdData.forEach((element: any) => {
          targetOption.children.push({
            "value": element.id,
            "label": element.name,
            "isLeaf": true,
          })
        });
        setAppParams(targetOption)
      }

    }
  };

Answer 1

可以在onChange的function里面进行children的数据新增，在loadData的function做loading效果的处理即可。
下面是部分代码：

options为一级数据。

const [options, setOptions] = useState();

<Cascader
  options={options}
  loadData={loadDataFunc}
  onChange={setVisionsFunc}
  changeOnSelect
/>

const loadDataFunc = selectedOptions => {
    const targetOption = selectedOptions[selectedOptions.length - 1];
    targetOption.loading = true;
    setTimeout(() => {
      targetOption.loading = false;
      setOptions(options);
    }, 100);
  };

const setVisionsFunc = async selectedOptions => {
    if (selectedOptions.length === 1) {
       const options_temp = [...options];
       const res = await 二级数据接口(selectedOptions[0]);
       const children: Array<object> = [];
       res.map(pro => {
          children.push({ label: pro.name, value: pro.code, isLeaf: false });
          return true;
       });
       options_temp.find(_ => _.value === selectedOptions[0])['children'] = children;
       setOptions(options_temp);
    } else if (selectedOptions.length === 2) {
       const apps = await 三级数据接口(selectedOptions[1]);
       const options_temp = [...options];
       const apps = await getDirectoryApp(selectedOptions[1]);
       const children: Array<object> = [];
       apps.map(pro => {
         children.push({ label: pro.name, value: pro.code, isLeaf: true });
         return true;
       });
       const product = options_temp.find(_ => _.value === selectedOptions[0]);
       product.children.find(_ => _.value === selectedOptions[1])['children'] = children;
       setOptions(options_temp);
    }
  };