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>
}