Ошибка минимального максимума диапазона пользовательского интерфейса материала: невозможно прочитать свойство 'focus', равное нулю

Question

Я новичок в React и MaterialUI. Я пытаюсь сделать фильтр диапазона с минимальными и максимальными входами и строкой диапазона, используя MaterialUI и его пример с числовым форматом . Если я использую свойство prop 'value' для Slider, когда я пытаюсь переместить большой палец, выдается ошибка:

Uncaught TypeError: невозможно прочитать свойство 'focus', равное null.

Но не всегда. Если я использую prop 'defaultValue', такой ошибки нет, но в консоли есть другая:

Material-UI: компонент меняет состояние значения по умолчанию неуправляемого слайдера после инициализации. Чтобы подавить это предупреждение, выберите управляемый слайдер.

Что мне делать, чтобы оно работало? Код в песочнице

Answer 1

, чтобы избавиться от этого предупреждения, сделайте следующее:

setValues({
  ...values,
  [name]: Number(value)
});

API говорит, что ожидает Number, но вы предоставляете строку