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

问题的根源在于您的<input>的价值。如果ReactJS收到undefined作为输入值，则该输入被视为“不受控制”，因此您不应将其更改为“受控”。

关于ReactJS here中不受控制的输入，有一个非常彻底的答案。

Answer 2

发生此错误的原因是您试图将不受控制的输入更改为受控制。这里的输入值基于组件的状态，但是在第一个渲染期间状态是不确定的，这意味着输入是不受控制的，但是当您在输入字段中写入内容时，状态会控制该状态，并且会发生此错误。要摆脱这种情况，请将您的状态设置为空字符串（“”）。因此，输入字段将由第一次渲染时的状态控制。

React-组件将文本类型的受控输入更改为不受控制

2 个答案: