antd pro 通过后台接口异步加载 select 数据

想在 Ant Design Pro 后台中，通过后台接口异步加载 Select 的选项，例如文章的作者。

思路

• react effect hook 拉取数据，但是如何保证只在加载时运行一次，而不是结束时还运行一次。实际上用中括号就没有这个烦恼，不指定返回的匿名函数就可以。
• 获取的数据，如何传递给 select 组件。使用 useState

Show me the code: 以 Antd Pro 代码为例

例如下拉选择文章的作者：

引入依赖

import React, {useState, useEffect} from 'react';
import {getAuthors} from '@/services/ant-design-pro/api';

函数式组件中定义 useState 和 useEffect

const [authors, setAuthors] = useState([]);

useEffect(async () => {
  let data = await getAuthors({current: 1, pageSize: 65535});
  if (!data.success) {
    return;
  }
  setAuthors(data.data.map(item => ({
    value: item.ID,
    label: item.Name,
  })));
}, []); // mount 和 unmount 时执行

Form 中插入 Select 组件

<Form.Item name="AuthorId" label="Author">
  <Select options={authors}
  allowClear
  showSearch
  optionFilterProp="label"
  filterOption={(input, option) =>
    option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
  }
  >
  </Select>
</Form.Item>

参考

参考 antd select 组件的用户搜索示例。

• https://ant.design/components/select-cn/#components-select-demo-select-users
• https://stackoverflow.com/questions/53955170/retrieve-values-from-db-to-drop-down-in-ant-form

tags: Ant Design Pro

关于作者 🌱

我是来自山东烟台的一名开发者，有敢兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊， 查看更多联系方式