defaultValue или значение не работает на FormItem ANTD

Question

Я попытался использовать следующий код, и поле никогда не связывалось. Свойство onChange работает хорошо

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>

Я что-то упустил? Я даже использовал input вместо Input

EDIT По методу componentDidMount я получаю данные из 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
                }
              })

          })

Я пытался использовать initialValue, но он работает, только когда значение состояния установлено для метода constructor. При вызове API изменение не отражается.

Answer 1

В документах указано , что:

Вы не можете установить значение формы control через значение defaultValue prop, и вы должны установить значение по умолчанию с initialValue в getFieldDecorator вместо этого.

Вы не должны вызывать setState вручную, пожалуйста, используйте this.props.form.setFieldsValue для программного изменения значения.

Так что вам просто нужно позвонить 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)