Problème avec defaultValue ou valeur non valide dans FormItem ANTD

Question

J'ai essayé d'utiliser le code suivant mais les champs ne sont pas liés. L'attribut onChange fonctionne correctement

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

<FormItem validateStatus={NameError ? "erreur" : ""} help={NameError ""}>
  {getFieldDecorator("Nom", {
    //valeurinitiale : this.state.Data.Name,
    règles : [{ requis : vrai, message : "Veuillez saisir le nom du composant !" }]
  })(
    <Entrée
      className="form-control"
      type="texte"
      nom="Nom"
      defaultValue={this.state.Data.Name}
      onChange={this.onChange}
    />
  )}
</FormItem>

Est-ce que j'ai raté quelque chose ? J'ai même utilisé input au lieu de Input

Edit Dans la méthode componentDidMount

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

            this.setState({
                Données: {
                    Identifiant : data.field.Id,
                    Nom : data.field.Name,
                    Description : données.champ.Description,
                    Valeur : data.field.Value
                }
              })

          })
J'ai essayé d'utiliser initialValue mais cela ne fonctionne que si la valeur d'état est définie dans la méthode constructor Les modifications ne sont pas reflétées lors de l'appel de l'API. 

Answer 1

Vous pouvez également utiliser des crochets

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

La documentation indique :

Lorsque les données sont chargées depuis le backend, appelez simplement 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
          })
      })

Ou plus succinctement, si le data.field du backend correspond exactement au nom du champ :

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