在表单页面中点击新增按钮,触发弹窗,弹窗中是一个表单,有2个下拉,每个下拉的数据都需要通过接口获取,实际使用中发现有多个下拉已经调用了接口,但是数据并没有渲染上去
1.出现不渲染的场景
比如有2个下拉分别是name1,name2,新建一个变量
const [routeData, setRouteData] = useState({name1:[]},name2:[])
然后:
useEffect(() => {
//调用接口获取name1的数据,然后set进去name1
serve.getName1List().then(res=>{
routeData.name1 = res
setRouteData(routeData)
})
//调用接口获取name2的数据,然后set进去name2
serve.getName1List().then(res=>{
routeData.name1 = res
setRouteData(routeData)
})
}, [visible])
注意!上面代码有2个坑
- 直接改routeData的属性再set是不生效的,需要深拷贝一份数据,然后修改新数据,再整体set才生效。
- 分开set其中的属性也是有问题的,很可能routeData其中的一个属性没有set进去
2.修改
const [routeData, setRouteData] = useState({name1:[]},name2:[])
useEffect(() => {
setRouteData({})
if (form && !visible) {
form.resetFields()
}
if (visible) {
// 自执行函数
(async function () {
form.resetFields()
let name1 = await getName1Fn()
let name2 = await getName2Fn()
// 深拷贝后再对拷贝数据进行整体赋值
let data = JSON.parse(JSON.stringify(routeData))
data.name1= name1
data.name2= name2
setRouteData(data)
}());
}
}, [visible])
const getName1Fn = async () => {
return new Promise((resolve, reject) => {
basketPageList().then((res) => {
if (res?.code === 0) {
resolve(res.data)
}
})
})
}
const getName2Fn = async () => {
return new Promise((resolve, reject) => {
getPageList().then((res) => {
if (res?.code === 0) {
resolve(res.data)
}
})
})
}