Блог

Главная - Вопросы по программированию - Получение «Компонент изменяет неконтролируемый ввод, подлежащий контролю (…)» при использовании KeyboardDatePicker

Получение «Компонент изменяет неконтролируемый ввод, подлежащий контролю (…)» при использовании KeyboardDatePicker

#reactjs #typescript #react-hooks

Вопрос:

Воспроизводимый пример можно найти по этой ссылке.

Я начинаю с Реакции и крючков. В настоящее время я пытаюсь создать форму конфигурации для создания некоторых отчетов. Первый подкомпонент всей моей формы, которую я создаю,-это Filter компонент только с двумя датами (датой начала и датой окончания).

Во внешнем вызываемом компоненте Configuration у меня есть состояние формы, а даты начала и окончания передаются реквизитами Filter компоненту, а также обратный onPeriodChange вызов:

 export const Configuration: React.FC = () => {
  const [periodState, setPeriodState] = useState<Period>({
    startDate: '',
    endDate: '',
  });

  const handlePeriodChange = useCallback(
    (field: keyof Period, value: string) =>
      setPeriodState({ ...periodState, [field]: value }),
    [periodState],
  );

  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <form name="configuration">
        <Filters period={periodState} onPeriodChange={handlePeriodChange} />
      </form>
    </MuiPickersUtilsProvider>
  );
};

Затем реквизиты передаются KeyboardDatePicker компонентам в Filter компонентах:

 export const Filters: React.FC<FilterProps> = (filterProps: FilterProps) => {
  const { period, onPeriodChange } = filterProps;

  return (
    (...)
      <KeyboardDatePicker
        disableToolbar
        fullWidth
        variant="inline"
        format="dd/MM/yyyy"
        id="start-date"
        label="Data de descarga inicial:"
        value={period.startDate}
        onChange={(date) => {
          onPeriodChange(
            'startDate',
            date instanceof Date amp;amp; !Number.isNaN(date)
              ? date.toISOString()
              : '',
          );
        }}
        required
        KeyboardButtonProps={{
          'aria-label': 'change date',
        }}
      />
    (...)
  );
};

При первом рендеринге компоненты отображаются как недопустимые:

Недопустимые компоненты

И когда я изменяю значение первого компонента, я получаю предупреждение консоли (вы можете воспроизвести это поведение в песочнице).:

Предупреждение: Компонент изменяет неконтролируемый вход для управления. Вероятно, это вызвано изменением значения с неопределенного на определенное значение, чего не должно произойти. Решите, использовать ли управляемый или неконтролируемый входной элемент в течение всего срока службы компонента.

Я не знаю, почему я получаю эту ошибку, так как начальные значения даты начала и окончания являются пустой строкой (и не неопределенной). Можете ли вы указать мне, где моя ошибка? Спасибо!

Комментарии:

1. Вы пробовали отлаживать его, чтобы увидеть, действительно ли значения не определены в какой-либо момент времени? Кроме того, вы можете избежать зависимости в своем useCallback крючке, используя функциональное обновление


Ответ №1:

Это связано с тем , что значение периода изменяется с пустой строки на a Date , в вашем начальном значении вы также должны передать a Date .

Предупреждение: Компонент изменяет неконтролируемый вход для управления. Вероятно, это вызвано изменением значения с неопределенного на определенное значение, чего не должно произойти. Решите, использовать ли управляемый или неконтролируемый входной элемент в течение всего срока службы компонента.

Обновление интерфейса

 export interface Period {
  startDate: Date;
  endDate: Date;
}

Обновление начального состояния

 const [periodState, setPeriodState] = useState<Period>({
  startDate: new Date(Date.now()),
  endDate: new Date(Date.now())
});

Обновление песочницы

Метки: ,