reactjs - defaultValue hoặc value không hoạt động trên FormItem ANTD

Tôi đã thử sử dụng mã sau và trường không bao giờ được gắn kết. Thuộc tính onChange hoạt động tốt

const { getFieldDecorator, getFieldError, isFieldTouched } = this.props.form;
const NameError = isFieldTouched("Name") && getFieldError("Name");

<FormItem validateStatus={NameError ? "error" : ""} help={NameError || ""}>
  {getFieldDecorator("Name", {
    //initialValue: this.state.Data.Name,
    rules: [{ required: true, message: "Please input the component name!" }]
  })(
    <Input
      className="form-control"
      type="text"
      name="Name"
      defaultValue={this.state.Data.Name}
      onChange={this.onChange}
    />
  )}
</FormItem>

Có phải tôi đang bỏ lỡ điều gì không? Tôi thậm chí đã dùng input thay vì Input

EDIT Trên phương thức comComponentDidMount, tôi lấy dữ liệu từ API:

fetch('http://localhost:5728/Fields/get/' + this.state.Data.Id)
          .then(results=>{
            return results.json()
          })
          .then(data=>{

            this.setState({
                Data: {
                    Id: data.field.Id,
                    Name: data.field.Name,
                    Description: data.field.Description,
                    Value: data.field.Value
                }
              })

          })

Tôi đã thử sử dụng initialValue, nhưng nó chỉ hoạt động khi giá trị state được thiết lập trong phương thức constructor. Khi gọi API, sự thay đổi không được phản ánh.

Câu trả lời #1

Tài liệu cho biết rằng:

Bạn không thể đặt giá trị của control trong form thông qua prop defaultValue, và bạn nên đặt giá trị mặc định bằng initialValue trong getFieldDecorator thay vào đó.

Bạn không nên gọi setState thủ công, vui lòng sử dụng this.props.form.setFieldsValue để thay đổi giá trị một cách có lập trình.

Vì vậy, bạn chỉ cần gọi setFieldsValue khi dữ liệu được tải từ backend:

fetch('http://localhost:5728/Fields/get/' + this.state.Data.Id)
      .then(results=>{
        return results.json()
      })
      .then(data=>{

        this.props.form.setFieldsValue({
                Id: data.field.Id,
                Name: data.field.Name,
                Description: data.field.Description,
                Value: data.field.Value
          })
      })

Hoặc ngắn gọn hơn, nếu data.field từ backend hoàn toàn khớp với tên các trường:

this.props.form.setFieldsValue(data.field)

Câu trả lời #2

bạn cũng có thể dùng móc

import { Form } from "antd"

const [form] = Form.useForm();

 fetch('api')
      .then(results=>{
        return results.json()
      })
      .then(data=>{
        form.setFieldsValue({
           sample: data.dataYouWant
        });


<Form form = {form}>
   <Form.Item name = "sample">
       <Input />
   </Form.Item>
</Form>