问题描述: antd的cascader动态加载需要点击两下才会加载子级数据,而且加载的是第一次请求的
原因: loadData函数没有更新options,即loadData中最下面的setState更新options部分应该加上。
代码如下:
loadData = async selectedOptions => {
//得到选择的option对象
const targetOption = selectedOptions[selectedOptions.length - 1]
//显示loading效果
targetOption.loading = true
//根据选中的分类,请求获取二级分类列表,并显示
const subCategories = await this.getCategories(targetOption.value)
console.log("subCategories:", subCategories)
targetOption.loading = false
console.log("loadData:", targetOption)
if (subCategories && subCategories.length > 0) {
//生成一个二级列表的options
const childOptions = subCategories.map(c => ({
value: c._id,
label: c.name,
isLeaf: true,
}))
//关联到当前options上
targetOption.children = childOptions
console.log("生成二级列表", targetOption)
} else {
//当前选中的分类没有二级分类
targetOption.isLeaf = true
}
// 更新 options 状态
this.setState({
options: [...this.state.options],
});
};