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

Question

组件正在更改要控制的类型文本的不受控制的输入.输入元素不应从不受控制切换到受控制(或反之亦然).决定在组件的使用寿命期间使用受控或不受控制的输入元素.

我的代码:

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

Answer 1

原因是,在您定义的状态中:

this.state = { fields: {} }

为空白对象字段,以便在第一渲染this.state.fields.name会undefined,并且输入字段将获得价值为:

value={undefined}

因为输入字段将变得不受控制.

在输入中输入任何值后,fields状态变为:

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

并且在那时输入字段被转换为受控组件,这就是您收到错误的原因:

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

可能的解决方案:

1-将fieldsin状态定义为:

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

2-或者使用如下的短路评估来定义value属性:

value={this.state.fields.name || ''}   // (undefined || '') = ''

Answer 2

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

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

Answer 3

除了接受的答案之外，如果您使用的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}

Answer 4

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

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

Answer 5

发生这种情况是因为该值不能为未定义或 null 来解析，您可以这样做

value={ this.state.value ?? "" }

Answer 6

如上所述，您需要设置初始状态，在我的例子中，我忘记在 setSate(); 内添加 ' ' 引号；

  const AddUser = (props) => {
  const [enteredUsername, setEnteredUsername] = useState()
  const [enteredAge, setEnteredAge] = useState()

给出以下错误

正确的代码是简单地将初始状态设置为空字符串 ' '

  const AddUser = (props) => {
  const [enteredUsername, setEnteredUsername] = useState('')
  const [enteredAge, setEnteredAge] = useState('')

Answer 7

const [name, setName] = useState()

一旦您在文本字段中输入就会产生错误

const [name, setName] = useState('') // <-- by putting in quotes 

将解决此字符串示例的问题。

Answer 8

解决此问题的最佳方法是将初始状态设置为''。

constructor(props) {
 super(props)
  this.state = {
    fields: {
      first_name: ''
    }
  }
  this.onChange = this.onChange.bind(this);
}

onChange(e) {
  this.setState({
    fields:{
     ...this.state.fields,
     [e.target.name]: e.target.value
    }
  })
}


render() {
  return(
    <div className="form-group">
      <input
        value={this.state.fields.first_name}
        onChange={this.onChange}
        className="form-control"
        name="first_name" // Same as state key
        type="text"
        refs="name"
        placeholder="Name *"
      />
      <span style={{color: "red"}}>{this.state.errors.first_name}</span>
    </div>
  )
} 

if (field)然后，如果您的值为 ，您仍然可以像这样运行检查，并且仍然获得相同的结果''。

现在，由于您的值现在被分类为字符串类型 ，而不是评估后未定义的类型。因此，从控制台中清除了一个大红色块的错误。

Answer 9

更改value为defaultValue将解决该问题。

注意事项：

defaultValue仅用于初始负载。如果要初始化，input则应该使用defaultValue，但是如果要使用state来更改值，则需要使用value。阅读这更多。

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

Answer 10

我是reactjs新手，我正在使用reactjs版本17，我遇到了这个问题

我解决了：

而不是这个

const [email, setEmail] = useState();

我添加了这个

const [email, setEmail] = useState("");

在 useState 函数中，我添加了引号来初始化数据，错误消失了。

Answer 11

首先设置当前状态 ...this.state

这是因为当您要分配新状态时，它可能是未定义的。所以也可以通过设置状态提取当前状态来解决

this.setState({...this.state, field})

如果您的状态中有一个对象，则应按如下所示设置状态，假设您必须在用户对象中设置用户名。

this.setState({user:{...this.state.user, ['username']: username}})

Answer 12

如果该值不存在或为 null，则输入空值。

value={ this.state.value || "" }

Answer 13

如果您将value属性设置为对象的属性并希望确保该属性不是未定义的，那么您可以将空合并运算符??与可选链接运算符结合使用?.，如下所示：

<input
  value={myObject?.property ?? ''}
/>