Здравствуйте, я пытаюсь создать поле ввода, которое уже имеет предустановленное значение из ответа API в ReactJS. Я пытался использовать console.info(data[0].name)
, и он показал ожидаемое значение, и когда я попытался показать его во внешнем интерфейсе, он также отлично работает. Но когда я пытаюсь показать его как начальное значение для моего поля ввода, оно просто дает мне пустое поле ввода. initialValue = {data[0].name}
Вот мой app.js
import React, { useEffect, useState } from "react";
import { Form, Button, Input } from "antd";
function App() {
const [data, setData] = useState([{}]);
const [form] = Form.useForm();
const onFinish = (values) => {
console.info("Received values of form: ", values);
};
useEffect(() => {
fetch("https://jsonplaceholder.typicode.com/posts/1/comments")
.then((res) => res.json())
.then((data) => {
setData(data);
console.info(data);
});
}, []);
return (
<div>
{" "}
<Form form = {form} onFinish = {onFinish}>
<Form.Item
className = "Form-label"
name = "firstName"
label = "First Name"
initialValue = {data[0].name}
>
<Input
maxLength = {10}
style = {{ minWidth: 200, maxWidth: 500 }}
placeholder = "Enter First Name"
/>
</Form.Item>
<Form.Item
className = "Form-label"
name = "middleName"
label = "Middle Name"
initialValue = ""
>
<Input
maxLength = {10}
style = {{ minWidth: 200, maxWidth: 500 }}
placeholder = "Enter Middle Name"
/>
</Form.Item>
<Form.Item>
<div className = "Btn-Primary-Create-Employee">
<Button type = "primary" htmlType = "submit">
Save
</Button>
</div>
</Form.Item>
</Form>
</div>
);
}
export default App;
Вот объект, который я получаю
[
{
"postId": 1,
"id": 1,
"name": "id labore ex et quam laborum",
"email": "[email protected]",
"body": "laudantium enim quasi est quidem magnam voluptate ipsam eos\ntempora quo necessitatibus\ndolor quam autem quasi\nreiciendis et nam sapiente accusantium"
},
{
"postId": 1,
"id": 2,
"name": "quo vero reiciendis velit similique earum",
"email": "[email protected]",
"body": "est natus enim nihil est dolore omnis voluptatem numquam\net omnis occaecati quod ullam at\nvoluptatem error expedita pariatur\nnihil sint nostrum voluptatem reiciendis et"
}
]
Я также сделал проект codeandbox, чтобы лучше визуализировать мою проблему.
настройте состояние загрузки и не возвращайтесь, пока загрузка не будет завершена, и это должно исправить это.
import React, { useEffect, useState } from "react";
import { Form, Button, Input } from "antd";
function App() {
const [data, setData] = useState([{}]);
const [loading, setLoading] = useState(true);
const [form] = Form.useForm();
const onFinish = (values) => {
console.info("Received values of form: ", values);
};
useEffect(() => {
fetch("https://jsonplaceholder.typicode.com/posts/1/comments")
.then((res) => res.json())
.then((data) => {
setData(data);
setLoading(false);
console.info(data);
})
.catch((err) => {
setLoading(false);
});
}, []);
if (!loading) {
return (
<div>
{" "}
<Form form = {form} onFinish = {onFinish}>
<Form.Item
className = "Form-label"
name = "firstName"
initialValue = {data.length ? data[0].name : "email"}
label = "First Name"
>
<Input
maxLength = {10}
style = {{ minWidth: 200, maxWidth: 500 }}
placeholder = "Enter First Name"
/>
</Form.Item>
<Form.Item
className = "Form-label"
initialValue = {data.length ? data[0].name : "email"}
name = "email"
label = "email"
>
<Input
maxLength = {10}
style = {{ minWidth: 200, maxWidth: 500 }}
placeholder = "Enter Middle Name"
/>
</Form.Item>
<Form.Item>
<div className = "Btn-Primary-Create-Employee">
<Button type = "primary" htmlType = "submit">
Save
</Button>
</div>
</Form.Item>
</Form>
</div>
);
}
return null;
}
export default App;
Я использую antd для своего компонента Forms
Проверьте это - github.com/ant-design/ant-design/issues/…