在react和antd中,怎么把接口返回来的数据回显到form.list上,请给出代码示例
时间: 2023-06-06 21:08:52 浏览: 918
如果你需要在React和Antd中回显数据,你可以在组件的state中存储接口返回的数据,然后将数据传递给Antd的Form组件。下面是一个简单的代码示例:
```
import React, { useState, useEffect } from 'react';
import { Form, Input, Button } from 'antd';
import axios from 'axios';
const MyForm = () => {
const [formData, setFormData] = useState({});
useEffect(() => {
const fetchData = async () => {
const result = await axios.get('your_api_endpoint');
setFormData(result.data);
};
fetchData();
}, []);
const onFinish = (values) => {
console.log('Received values of form: ', values);
};
return (
<Form
name="basic"
initialValues={formData}
onFinish={onFinish}
>
<Form.Item
label="Username"
name="username"
>
<Input />
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit">
Submit
</Button>
</Form.Item>
</Form>
);
};
export default MyForm;
```
在上面的代码中,我们首先在组件的state中定义了一个formData变量。在组件挂载时,我们使用useEffect和axios来异步地从API中获取数据,并将其保存在formData变量中。在Form组件的initialValues属性中,我们将formData传递给表单,使表单的输入框能够自动回显接口返回的数据。
注意,这只是一个简单的示例,并没有完整的错误处理和额外的优化。实际使用中,你可能需要考虑更多的情况,例如接口返回错误,如何处理用户输入等等。
阅读全文