Masalah dengan nilai lalai atau nilai dalam FormItem ANTD tidak sah

Question

Saya cuba menggunakan kod berikut tetapi medan tidak terikat. atribut onChange berfungsi dengan baik

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

<FormItem validateStatus={NameError ? "error" : ""} help={NameError ||.
  {getFieldDecorator("Nama", {
    //initialValue: this.state.Data.Name,
    peraturan: [{ diperlukan: benar, mesej: "Sila masukkan nama komponen }]
  })(
    <Input
      className="form-control"
      type="text"
      name="Nama"
      defaultValue={this.state.Data.Name}
      onChange={this.onChange}
    />
  )}
</FormItem>

Adakah saya terlepas sesuatu? Saya juga menggunakan input dan bukannya Input

Edit Dalam kaedah componentDidMount

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

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

          })

Saya cuba menggunakan initialValue tetapi itu hanya berfungsi jika nilai keadaan ditetapkan dalam kaedah constructor Perubahan tidak ditunjukkan semasa memanggil API.

Answer 1

Anda juga boleh menggunakan cangkuk

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>

Answer 2

Dokumentasi menyatakan:

Apabila data dimuatkan dari bahagian belakang, hubungi sahaja setFieldsValue:

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

Atau lebih ringkas, jika data.field bahagian belakang betul-betul sepadan dengan nama medan:

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