想在 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
微信关注我哦 👍
我是来自山东烟台的一名开发者，有感兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊， 查看更多联系方式