一个组件正在将一个不受控制的文本类型输入更改为 ReactJS 中的受控错误

IT技术 javascript reactjs
2021-01-27 09:16:38

警告：组件正在更改要控制的文本类型的不受控制的输入。输入元素不应从不受控制切换到受控制（反之亦然）。决定在组件的生命周期内使用受控或非受控输入元素。*

以下是我的代码：

constructor(props) {
  super(props);
  this.state = {
    fields: {},
    errors: {}
  }
  this.onSubmit = this.onSubmit.bind(this);
}

....

onChange(field, e){
  let fields = this.state.fields;
  fields[field] = e.target.value;
  this.setState({fields});
}

....

render() {
  return(
    <div className="form-group">
      <input
        value={this.state.fields["name"]}
        onChange={this.onChange.bind(this, "name")}
        className="form-control"
        type="text"
        refs="name"
        placeholder="Name *"
      />
      <span style={{color: "red"}}>{this.state.errors["name"]}</span>
    </div>
  )
}
6个回答

原因是，在您定义的状态下：

this.state = { fields: {} }

字段作为空白对象，因此在第一次渲染期间this.state.fields.name将为undefined，并且输入字段将获得其值：

value={undefined}

因此，输入字段将变得不受控制。

在 input 中输入任何值后，fields状态将更改为：

this.state = { fields: {name: 'xyz'} }

那时输入字段被转换为受控组件；这就是您收到错误的原因：

组件正在更改要控制的文本类型的不受控制的输入。

可能的解决方案：

1- 将fields进入状态定义为：

this.state = { fields: {name: ''} }

2- 或者使用像这样的短路评估来定义 value 属性：

value={this.state.fields.name || ''}   // (undefined || '') = ''
谢谢你这对我有用： value={this.state.fields.name || ''}
2021-03-13 09:16:38
因为''是一个有效的字符串值。因此，当您更改''为 'xyz' 时，输入类型不会改变意味着受控到受控。但是在undefinedtoxyz类型的情况下会从不受控制变为受控制。
2021-03-19 09:16:38
是否有原因 undefined 是“不受控制的”而后者是“受控制的” - 这些是什么意思？
2021-04-08 09:16:38
我不知道一旦值变得未定义，输入就会自动不受控制，太棒了。已经解决了我的问题
2021-04-08 09:16:38
惊人！因为我在官方文档中没有看到这一点，还是我瞎了？请链接到源:)
2021-04-09 09:16:38

更改value为defaultValue将解决它。

注意：

defaultValue仅用于初始加载。如果要初始化，input则应使用defaultValue，但如果要使用state更改值，则需要使用value. 阅读本文了解更多信息。

我曾经value={this.state.input ||""}在input摆脱这一警告的。

谢谢！我遇到了这个问题，其他解决方案不适用于我，但这个解决方案有所帮助。
2021-04-06 09:16:38

在组件内部按以下方式放置输入框。

<input className="class-name"
              type= "text"
              id="id-123"
              value={ this.state.value || "" }
              name="field-name"
              placeholder="Enter Name"
              />

除了接受的答案之外，如果您使用的input是checkboxor类型radio，我发现我还需要 null/undefined 检查checked属性。

<input
  id={myId}
  name={myName}
  type="checkbox" // or "radio"
  value={myStateValue || ''}
  checked={someBoolean ? someBoolean : false}
  />

如果您使用 TS（或 Babel），您可以使用空合并而不是逻辑 OR 运算符：

value={myStateValue ?? ''}
checked={someBoolean ?? false}
解决复杂问题的简单思维，很酷@Lynden Noye
2021-04-10 09:16:38

很简单，您必须先设置初始状态

如果您不设置初始状态， react 会将其视为不受控制的组件

其它你可能感兴趣的问题
上一篇如何以编程方式美化 JSON？ 下一篇获取数组内对象的索引，匹配条件