[Cascader] React18.2.0， 单选 Cascader，异步加载数据时，展开不符合预期

[YyumeiZhang]

Is there an existing issue for this?

• [X] I have searched the existing issues

Which Component

Cascader

Semi Version

2.57.0

Current Behavior

Expected Behavior

Steps To Reproduce

react/react-dom 版本需使用 18.2.0 复现 codesanbox

ReproducibleCode

import { Button } from '@douyinfe/semi-ui';
import React, { useState, useEffect,  useRef }  from "react";
import { Modal, Form, Cascader } from "@douyinfe/semi-ui";

const initialData = [
  {
    label: "Node1",
    value: "0-0",
  },
  {
    label: "Node2",
    value: "0-1",
  },
  {
    label: "Node3",
    value: "0-2",
    isLeaf: true,
  },
];
 
export default function App() {
  const [value, setValue] = useState([]);
  const onChange = useEffect((value) => {
    setValue(value);
  },[]);

  const [data, setData] = useState(initialData);
  const updateTreeDataC = (list, value, children) => {
    return list.map((node) => {
      if (node.value === value) {
        return { ...node, children };
      }
      if (node.children) {
        return {
          ...node,
          children: updateTreeDataC(node.children, value, children),
        };
      }
      return node;
    });
  };

  const onLoadDataC = (selectedOpt) => {
    const targetOpt = selectedOpt[selectedOpt.length - 1];
    const { label, value } = targetOpt;
    return new Promise((resolve) => {
      if (targetOpt.children) {
        resolve();
        return;
      }
      setTimeout(() => {
        setData((origin) =>
          updateTreeDataC(origin, value, [
            {
              label: `${label} - 1`,
              value: `${label}-1`,
              isLeaf: selectedOpt.length > 1,
            },
            {
              label: `${label} - 2`,
              value: `${label}-2`,
              isLeaf: selectedOpt.length > 1,
            },
          ])
        );
        resolve();
      }, 1000);
    });
  };


  return (
    <>
      <div>
        <Cascader
           value={value}
           onChange={onChange}
           style={{ width: 300 }}
           treeData={data}
           loadData={onLoadDataC}
           placeholder="Please select"
        />
      </div>
    </>
  );
}

Environment

- OS:
- browser:

Anything else?

No response

[mehwww]

遇到同样的问题

[YyumeiZhang]

问题表现：

1. 无选中项目情况下，点击加载，loading 结束，被加载的子项目没有显示出来 如上述视频表现。

2. 在有选中项目情况下，点击其他项目的加载， loading结束，面板显示的是原来的选中项目