Недопустимое значение для пропа `value` в теге <input>

Question

Я получаю это предупреждение, которое не могу разрешить:

Неверное значение для пропеллера value в теге. Либо удалить его из элемент или передать строковое или числовое значение, чтобы сохранить его в DOM. Для деталей

Вот код, который я использую:

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

Мои интерфейсы машинописи выглядят так:

export interface IFieldEdition{
    Data:IFieldData
}

export interface IFieldData{
    Id?:number,
    Name?:string,
    Value?:string,
    Description?:string,
    CreatedDate?:Date,
    CreatedBy?:string,
    StatusId?: number
}

Как я могу решить это? Любая подсказка?

Answer 1

Я вижу, вы используете формы antd. Из формы официальный документ

После переноса getFieldDecorator значение (или другое свойство, определенное valuePropName) onChange (или другое свойство, определенное триггером) реквизит будут добавлены в элементы управления формой flow поток данных формы будет обработан по форме, которая вызовет:

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

Использование initialValue: (()=>{this.state.Data.Name}, которое вызывает setState, может быть причиной возникновения этой ошибки.

Answer 2

Я видел эту ошибку при создании формы с вводом, в моем случае решение было очень простым:

    <input 
      type="text" 
      value={this.state.term} 
      onChange={(e) => this.setState({ term: e.target.value.toLocaleUpperCase() })}
    />

То, что случилось, было то, что я просто забыл вызвать метод, и у меня было так:

toLocaleUpperCase

Итак, не забывайте скобки в конце любого вызова функции. Надеюсь, это поможет.

Answer 3

Не уверен, как это getFieldDecorator работает, но, похоже, проблема в том, что вы передаете функцию как initialValue prop.

Попробуйте заменить initialValue: (()=>{this.state.Data.Name}) на initialValue: this.state.Data.Name