🧐[问题] ProFormTreeSelect 异步加载案例

[leshalv]

ProFormTreeSelect 使用loadData时无效，发生错误 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method. at Tree

[leshalv]

@1247748612

[Dunqing]

在Pro里 异步加载统一使用 options

[leshalv]

ProFormTreeSelect 没有 options属性？ @1247748612

[Dunqing]

fieldProps里

[leshalv]

不太对吧

[Dunqing]

啊 你这不是异步请求吗 用request就行了

[leshalv]

需要配合params来使用，才会生效对吧

[Dunqing]

不需要的

[leshalv]

我这边试着看，只加载了一次，展开节点，并没有触发request

[Dunqing]

你得配置loadData去加载子节点 你看看文档

[leshalv]

配合loadData加载子节点失败，报错Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method. at Tree

[Dunqing]

配合loadData加载子节点失败，报错Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.

at Tree

那这可能是个bug 明天排查下

[Dunqing]

异步加载数据使用request，如果需要使用loadData就不要使用request了 案例直接参考Antd

[chenshuai2144]

应该一起支持的，原来的loadData用起来很麻烦

[Dunqing]

应该一起支持的，原来的loadData用起来很麻烦

我没想到更好的办法支持

loadData会接收一个参数，但如果只用request实现的话，就需要把在loadData接收到的参数传递给request，现在能传递的只有一个keyWords。并且需要区分这是loadData触发的还是只是数据加载触发的。

[leshalv]

不报错了，还是不行，走了onload，页面并没有展示数据 @1247748612 @chenshuai2144

[Dunqing]

不报错了，还是不行，走了onload，页面并没有展示数据

你仔细看看loadData的文档是怎么加载数据的

你如果一次获取所有的数据就直接使用request

loadData是提供给你附加数据的

[leshalv]

好吧，异步加载到底怎么用呀，request也不行呀

[floki2020]

好吧，异步加载到底怎么用呀，request也不行呀

不知道你是想怎么弄？如果是异步加载 可以直接在 request={async （）=>{ const respone=await fetch() return respone }} 我用这个 但是这个只有请求一次

[X-neuron]

const [state,setState] = useSafeState({
    value: undefined,
    treeData: [
      { id: 1, pId: 0, value: "1", title: "Expand to load",isLeaf: false },
      { id: 2, pId: 0, value: "2", title: "Expand to load",isLeaf: false },
      { id: 3, pId: 0, value: "3", title: "Tree Node", isLeaf: true },
    ],
  });

  const genTreeNode = (parentId, isLeaf = false) => {
    const random = Math.random().toString(36).substring(2, 6);
    return {
      id: random,
      pId: parentId,
      value: random,
      title: isLeaf ? "Tree Node" : "Expand to load",
      isLeaf,
    };
  };

  const onLoadData = ({ id }) => {
    console.log(id);
    return new Promise(resolve => {
      setTimeout(() => {
        setState({
          treeData: state.treeData.concat([
            genTreeNode(id, false),
            genTreeNode(id, true),
            genTreeNode(id, true),
          ]),
        });
        resolve();
      }, 300);
    })
  };

<ProFormTreeSelect
          name="participant"
          label="指定参与人"
          fieldProps={{
            // showArrow: false,
            // filterTreeNode: true,
            // showSearch: true,
            // dropdownMatchSelectWidth: false,
            // labelInValue: true,
            // autoClearSearchValue: true,
            // multiple: true,
            // treeNodeFilterProp: "title",
            // // fieldNames: {
            // //   label: 'title',
            // // },
            options:state.treeData,
            loadData:onLoadData,

          }}

          placeholder="选择参与人员"
        />

上面的 配置可以 跑下来 异步数据和多次请求~