Problem mit ungültigem Standardwert oder Wert in FormItem ANTD

Question

Ich habe versucht, den folgenden Code zu verwenden, aber die Felder sind nicht gebunden. Das onChange-Attribut funktioniert einwandfrei

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

<FormItem validateStatus={NameError ? "error" : ""} help={NameError ||
  {getFieldDecorator("Name", {
    //initialValue: this.state.Data.Name,
    Regeln: [{ erforderlich: true, Nachricht: „Bitte geben Sie den Komponentennamen ein!“
  })(
    <Eingabe
      className="form-control"
      type="text"
      name="Name"
      defaultValue={this.state.Data.Name}
      onChange={this.onChange}
    />
  )}
</FormItem>

Übersehe ich etwas? Ich habe sogar input anstelle von Input

verwendet.

Edit In der Methode componentDidMount

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

            this.setState({
                Daten: {
                    Id: data.field.Id,
                    Name: data.field.Name,
                    Beschreibung: data.field.Description,
                    Wert: data.field.Value
                }
              })

          })

Ich habe versucht, initialValue zu verwenden, aber das funktioniert nur, wenn der Statuswert in der Methode constructor festgelegt ist. Änderungen werden beim Aufruf der API nicht berücksichtigt.

Answer 1

你也可以使用钩子

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

文档中指出：

当数据从后端加载时，只需调用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
          })
      })

或者更简洁地，如果后端的data.field完全匹配字段名：

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