Очистка ввода изменяет его с контролируемого на неуправляемый

Question

Я пытаюсь сделать ввод, который принимает только положительные целые числа. Я также ищу любые советы о том, где поставить проверочный лог c (если есть лучшее место). Прямо сейчас я отправляю изменения состояния редукции внутри onChange, если ввод. И вот где я проверяю значение.

У меня есть вход:

<input className='form-control' type='number' value={minors} onChange={ev => dispatch(updateMinors({
                value: Number(ev.target.value) > -1 ? Number(ev.target.value) : 0,
                isValid: !isNaN(ev.target.value) && Number.isInteger(ev.target.value),
                wasValidated: true
              }))} style={{ maxWidth: '6rem' }} />

это связано с состоянием редукции с помощью селектора:

const minors = useSelector(state => state.minors.value)

У меня есть для того же редуктора:

updateMinors: (state, action) => {
  state.minors.value = action.payload.minors
  state.minors.isValid = action.payload.isValid
  state.minors.wasValidated = action.payload.wasValidated
}

Исходное состояние редукции для того же среза:

minors: {
  value: 0,
  isValid: false,
  wasValidated: false
}

Представление по умолчанию, отображаемое с использованием этого кода:

  <div class="input-group mb-1">
    <input class="form-control" type="number" value="0" style="max-width: 6rem;">
    <div class="input-group-append">
      <span class="input-group-text" style="min-width: 5rem;">minors</span> 
    </div>
  </div>

Когда я пытаюсь очистить значение с помощью backspace, я получаю следующее предупреждение:

index.js:1 Warning: A component is changing a controlled input of type number to be uncontrolled. Input elements should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component.

Я знаю, что есть другой способ сделать это, и я пытаюсь выяснить это. Буду признателен за любую помощь!

---

Обновление В редукторе есть опечатка action.payload.minor. Это должно быть action.payload.value. Это вызвало и undefined присваивание значения ввода. Это, в свою очередь, изменило поле ввода с controlled на uncontrolled и, следовательно, предупреждение. Исправление опечатки исправило предупреждение.

Answer 1

Когда вы добавляете onChange к входу, React будет рассматривать его как управляемый вход и ожидать, что будет предоставлено значение состояния, это то, что вы делаете в своем коде с value={minors}

Но в вашем редукторе, если вы измените младшие на null или undefined, тогда React посчитает, что вы не предоставляете значение, и вы получите это сообщение об ошибке, в котором говорится, что вы переходите от контролируемого к неконтролируемому.

Ошибка исходит от вашего редуктора, где вы назначаете state.minors.value на action.payload.minors, оно должно быть:

updateMinors: (state, action) => {
  state.minors.value = action.payload.value
  state.minors.isValid = action.payload.isValid
  state.minors.wasValidated = action.payload.wasValidated
}