antdpro+form中两个Input用的同一个name，修改时，只修改其中一个

本文链接：https://blog.csdn.net/wjlcomeon/article/details/127653975

antdpro+form中两个Input用的同一个name，修改时，只修改其中一个。

看例子：

const MaintenForm =() =>{

 const [form]: FormInstance[] = Form.useForm();
    //请求接口，返回一个details,details为接口返回的数据


<Form form={form}>
<Row>
<Col>
<ProFormText name={'account_name'} label="用户名" />
<ProFormText name={'account_id'} label="用户id" />
</Col>
<Col>
<ProFormText name={'account_name1'} label="用户名" />
<ProFormText name={'account_id1'} label="用户id" />

</Col>
</Row>
</Form>

}

解法：改变其中一列的name，用form.setFieldsValue()。相当于在拿到后端传过来的数据之后，前端重新拼接。利用form.setFieldsValue()拼接。自己定义key值

const MaintenForm =() =>{

 const [form]: FormInstance[] = Form.useForm();
    //请求接口，返回一个details,details为接口返回的数据


useEffect(()=>{
    form.setFieldsValue({
        account_name1:details?.account_name,
        account_id1:details?.account_id
}) 

},[]) //有依赖就加上依赖

<Form form={form}>
<Row>
<Col>
<ProFormText name={'account_name'} label="用户名" />
<ProFormText name={'account_id'} label="用户id" />
</Col>
<Col>
<ProFormText name={'account_name1'} label="用户名" />
<ProFormText name={'account_id1'} label="用户id" />

</Col>
</Row>
</Form>

}