Реагировать - изменение неконтролируемого входа

Когда вы сначала визуализируете свой компонент, this.state.name не установлен, поэтому он оценивается как undefined, и вы заканчиваете передачу value={undefined} на input.

Когда ReactDOM проверяет, контролируется ли поле, проверяет, есть ли value != null (обратите внимание, что это !=, а не !==), и поскольку undefined == null в JavaScript, он решает, что он неконтролируемый.

Итак, когда вызывается onFieldChange(), this.state.name устанавливается в строковое значение, ваш вход переходит из неконтролируемого управления.

Если вы выполняете this.state = {name: ''} в своем конструкторе, потому что '' != null, ваш ввод будет иметь значение все время, и это сообщение исчезнет.

Другим подходом может быть установка значения по умолчанию внутри вашего ввода, например:

 <input name="name" type="text" value={this.state.name || ''} onChange={this.onFieldChange('name').bind(this)}/>

Я знаю, что другие уже ответили на это. Но один из очень важных факторов здесь может помочь другим людям, испытывающим подобную проблему:

В поле ввода необходимо добавить обработчик onChange (например, textField, флажок, радио и т.д.). И всегда обрабатывайте активность с помощью обработчика onChange, например:

<input ... onChange={ this.myChangeHandler} ... />

и когда вы работаете с флажком, вам может потребоваться обработать его состояние checked с помощью !!, например:

<input type="checkbox" checked={!!this.state.someValue} onChange={.....} >

Ссылка: https://github.com/facebook/react/issues/6779#issuecomment-326314716

Когда вы используете onChange={this.onFieldChange('name').bind(this)} во входных данных, вы должны объявить пустую строку вашего состояния в качестве значения поля свойства.

неверный путь:

this.state ={
       fields: {},
       errors: {},
       disabled : false
    }

правильный путь:

this.state ={
       fields: {
         name:'',
         email: '',
         message: ''
       },
       errors: {},
       disabled : false
    }

Один потенциальный недостаток при установке значения поля "" (пустая строка) в конструкторе - это если поле является необязательным и оставлено неотредактированным. Если вы не сделаете некоторый массаж перед отправкой формы, поле будет сохранено в вашем хранилище данных в виде пустой строки вместо NULL.

Эта альтернатива позволит избежать пустых строк:

constructor(props) {
    super(props);
    this.state = {
        name: null
    }
}

... 

<input name="name" type="text" value={this.state.name || ''}/>

Установите значение для свойства name в начальном состоянии.

this.state={ name:''};

Если реквизиты вашего компонента были переданы как состояние, установите значение по умолчанию для ваших входных тегов.

<input type="text" placeholder={object.property} value={object.property ? object.property : ""}>

Обычно это происходит только в том случае, если вы не контролируете значение поля, когда приложение запускается, и после того, как какое-то событие или какая-либо функция сработали или состояние изменилось, вы теперь пытаетесь контролировать значение в поле ввода.

Этот переход отсутствия контроля над входом и последующего контроля над ним - вот что в первую очередь вызывает проблему.

Лучший способ избежать этого - объявить некоторое значение для ввода в конструкторе компонента. Так что элемент input имеет значение с самого начала приложения.

В моем случае я упустил что-то действительно тривиальное.

<input value={state.myObject.inputValue}/>

Мое состояние было следующим, когда я получал предупреждение:

state = {
   myObject: undefined
}

Чередуя мое состояние со ссылкой на ввод моей стоимости, моя проблема была решена:

state = {
   myObject: {
      inputValue: ''
   }
}