使用钩子函数useEffect实现动态下拉选项

John.liu_Test

已于 2023-03-30 09:21:50 修改

阅读量288

点赞数 1

分类专栏： ant-design-pro 文章标签： html servlet 前端

于 2023-03-30 09:21:26 首次发布

本文链接：https://blog.csdn.net/lystest/article/details/129850797

版权

ant-design-pro 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章介绍了一种在React应用中处理动态数据的方法，特别是当valueEnum的值需要从接口获取时。通过useState和useEffectHook，可以从数据库获取用户信息，并以用户ID为键，userName为text值构建数据对象。这种方法允许数据变化时更新valueEnum，适应接口返回的动态数据。

摘要由CSDN通过智能技术生成

如果valueEnum的值是通过接口获取的，比如说，你想用数据库里的用户id作为key，userName作为text:值，因为数据是会动态变化的，无法用枚举直接自定义，下面给出一种解决方法：
const [datas, setDatas] = useState({})
useEffect(() => {
//调用接口
listOverdue().then((res) => {
//如果响应成功
if(res.bizCode===200){
let data = {};
//将拿到的返回值遍历
res.data.map(item=>{
//使用接口返回值的id做为代替原本的0，1
data[item.id]={
//使用接口返回值中的overdueValue属性作为原本的text:后面的值
text: item.overdueValue,
}
})
setDatas(data)
}
})
}, []);
----------------然后使用-----------------------------
{
title: '是否过期',
dataIndex: 'overdue',
key: 'overdue',
valueEnum: datas
}