< input>上的prop`value`的值无效标签 [英] Invalid value for prop `value` on <input> tag

问题描述

我收到无法解决的警告:

I am getting this warning that I can not resolve:

标签上的道具value的值无效.要么将其从 元素，或传递字符串或数字值以将其保留在DOM中. 详情

Invalid value for prop value on tag. Either remove it from the element, or pass a string or number value to keep it in the DOM. For details

以下是我正在使用的代码:

The following is the code I am using:

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

我的打字稿界面看起来像这样:

My typescript interfaces look like this:

export interface IFieldEdition{
    Data:IFieldData
}

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

我该如何解决?有任何线索吗?

How can I resolve this? Any clue?

推荐答案

我看到您正在使用antd表单.从antd形式官方文件:

I see you're using antd forms. From antd form official document:

在由getFieldDecorator包装后，值(或其他由定义的属性 valuePropName)onChange(或触发器定义的其他属性)道具 将添加到表单控件中，将处理表单数据流 按表格将导致:

After wrapped by getFieldDecorator, value(or other property defined by valuePropName) onChange(or other property defined by trigger) props will be added to form controls，the flow of form data will be handled by Form which will cause:

您不应该手动调用setState，请使用 this.props.form.setFieldsValue以编程方式更改值.

You shouldn't call setState manually, please use this.props.form.setFieldsValue to change value programmatically.

您使用initialValue: (()=>{this.state.Data.Name}调用setState可能是您收到此错误的原因.

Your use of initialValue: (()=>{this.state.Data.Name}, which calls setState might be the reason you're getting this error.

这篇关于< input>上的prop`value`的值无效标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！