Ant Design 的 Input 中的 value prop 不显示数据

Question

我有一个 Ant Design 表单，正在从 API 中获取数据，我想显示其中的数据 form.I 我在 ant design <Input/> 中设置了 value prop类似 <Input value = {value.project_name}/> 的字段，但输入字段为空。

value.project_name 来自 API。

为什么会发生这种情况我已经阅读了 docs 并且它说值是输入内容值并且它必须是一个字符串，所有这些条件在我的情况下都满足那么为什么我会得到这种意外的行为。

问题我应该如何用 value.project_name 填充表单输入字段，这应该是 Ant 中的受控组件设计。请帮助我做错了什么！

EditProjectForm.tsx

import { Form, Input, Button, Select, Space, Card} from "antd";
import { SendOutlined } from "@ant-design/icons";
import { useState } from "react";
const { TextArea } = Input;

const EditProject = ({fetchedData,submitEditFormData}) => {
  const [form] = Form.useForm()
  // EXTRACTING FIELDS FROM FETCHED DATA 
  const data = {
    user_ID: fetchedData.result[0].user_ID,
    project_ID: fetchedData.result[0].project_ID,
    project_name: fetchedData.result[0].project_name,
    project_Description: fetchedData.result[0].project_Description,
    project_Name_space: fetchedData.result[0].project_Name_space,
    project_language: fetchedData.result[0].project_language
  }
  const [value,setValue] = useState(data)

    // ON FORM SUBMIT 
    const onFinish = (values) => {
      // CONSTRUCT EDITED VALUES OBJECT
        const editedValues = {
          user_ID: data.user_ID,
          project_ID: data.project_ID,
          project_name: values.project_name,
          project_Description: values.project_Description,
          project_Name_space: values.project_Name_space,
          project_language: values.project_language
        }
        console.log("Form Edited",editedValues)
        // API CALL FUNCTION
        submitEditFormData(editedValues)
        form.resetFields()
    }
    console.log(data)

    return (
      <>
        <Card className="csi-project-card-0934">
          {/* HEADING TITLE */}
          <h1 className="csi-project-card-heading">Edit Project</h1>
          <Form
            form={form}
            labelCol={{ span: 7 }}
            wrapperCol={{ span: 10 }}
            layout="horizontal"
            colon={true}
            onFinish={onFinish}
            size="large"
          >
            <Form.Item
              label="Project Name"
              name="project_name"
              className="csi-ant-form-item"
              rules={[
                { required: true, message: "Project Name Cannot be Empty!" },
              ]}
            >
              <Input value = {value.project_name} onChange = {(e) => setValue(e.target.value)}/>
            </Form.Item>

            <Form.Item
              label="Project Description"
              name="project_Description"
              className="csi-ant-form-item"
              rules={[
                {
                  required: true,
                  message: "Project Description Cannot be Empty!",
                },
              ]}
            >
              <TextArea rows={4}/>
            </Form.Item>

            <Form.Item
              label="Project NameSpace"
              name="project_Name_space"
              className="csi-ant-form-item"
            >
              <Input disabled />
            </Form.Item>

            <Form.Item
              label="Select Language"
              name="project_language"
              className="csi-ant-form-item"
              rules={[{ required: true, message: "Language Cannot be Empty!" }]}
            >
              <Select>
                <Select.Option value="en">en</Select.Option>
              </Select>
            </Form.Item>

            <Form.Item className="csi-ant-form-item">
              <Space style={{ marginLeft: "35vw" }}>
                <Button
                  key="submit"
                  type="primary"
                  htmlType="submit"
                  shape="round"
                >
                  Save Changes <SendOutlined />
                </Button>
              </Space>
            </Form.Item>
          </Form>
        </Card>
      </>
    );
}
export default EditProject

Answer 1

您应该在表单组件中使用 initalValues。这是详细信息

Answer 2

我参考了 docs，解决方案是使用 <Form> 标签中的字段。

我添加的唯一代码是

<Form
            form={form}
            labelCol={{ span: 7 }}
            wrapperCol={{ span: 10 }}
            layout="horizontal"
            colon={true}
            onFinish={onFinish}
            size="large"
            fields={[
              {
                name: ["project_name"],
                value: data.project_name,
              },
              {
                name: ["project_Description"],
                value: data.project_Description
              },
              {
                name: ["project_Name_space"],
                value: data.project_Name_space
              },
              {
                name:["project_language"],
                value:data.project_language
              }
            ]}
          >

Ant Design 的 Input 中的 value prop 不显示数据

value prop does not show data in Input in Ant Design

reactjs

next.js

antd