记录ProFormList的坑

1,592 阅读1分钟

组件为ant design pro的ProFormList

注意: 使用ProFormList要保证每一项的name值都不同.(否则联动会错乱)

image.png

第三个下拉框都是经过第一个下拉框选择的值通过ProFormDependency判断之后进行显示,然后进行请求.

image.png

image.png

bug就来了,第一个下拉框选择之后,第三个下拉框请求数据.然后修改第一个下拉框的值,第三个下拉框不请求数据.(如下图)

image.png

解决

image.png

也就是说:在切换时,只发送了一次请求.导致数据异常.(通过F12的network查看)

今天在看官网的时候,发现官网更新了

<ProFormText 
    name="name" 
    label="姓名" /> 
<ProFormSelect 
    name="addr" 
    width="md" 
    label="与 name 联动的选择器" // dependencies 的内容会注入 request 
    dependencies={['name']} 
    request={async (params) => [ { label: params.name, value: 'all' } ]} />