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

Question

Я пытаюсь отсортировать свои компоненты

<input type="text" value={props.filters.text} onChange={(e) => {
            props.dispatch(setTextFilter(e.target.value));
        }} />
        {console.log(props.filters.sortBy)}
        <select value={props.filters.sortBy} onChange={(e) => {
            if (e.target.value === 'date') {
                props.dispatch(sortByDate());
            } else if (e.target.value === 'amount') {
                props.dispatch(sortByAmount());
            }
        }}>
            <option value="amount">Amount</option>
            <option value="date">Date</option>
        </select>

У меня ошибка в теге выбора. Получение ошибки A component is changing a controlled input of type text to be uncontrolled значение props.filters.sortBy изначально является датой. Когда я пытаюсь изменить его в раскрывающемся списке, возникает ошибка.

Answer 1

root вашей проблемы - это значение <input>. Если ReactJS получает undefined в качестве входного значения, этот вход считается «неконтролируемым», и вы не должны изменять его на «контролируемый».

В * 1010 есть очень подробный ответ о неконтролируемых входах * здесь .