Компонент изменяет неконтролируемый ввод текста типа для управления ошибкой в ReactJS

Предупреждение: компонент изменяет неконтролируемый ввод текста типа для управления. Входные элементы не должны переключаться с неуправляемых на управляемые (или наоборот). Выберите между использованием контролируемого или неконтролируемого элемента ввода в течение срока службы компонента. * Мой код:

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

Ответы

Ответ 1

Причина в том, что вы определили:

this.state = { fields: {} }

поля как пустой объект, поэтому при первом рендеринге this.state.fields.name будет undefined, а поле ввода получит значение как:

value={undefined}

Из-за этого входное поле станет неконтролируемым.

Когда вы вводите какое-либо значение на входе, fields в состоянии меняются на:

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

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

Компонент изменяет неконтролируемый ввод текста типа, который нужно контролировать.

Возможные решения:

1- Определите fields в состоянии как:

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

2- Или определите свойство value, используя оценку короткого замыкания следующим образом:

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

Ответ 2

Сначала установите текущее состояние ...this.state

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

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

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

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

Ответ 3

ПРОСТО, сначала нужно установить начальное состояние

Если вы не установите начальное состояние, реакция будет восприниматься как неконтролируемый компонент.

Ответ 4

Изменение value на defaultValue разрешит это.