React - 一个组件正在将文本类型的受控输入更改为不受控制答案

【问题标题】：React - A component is changing a controlled input of type text to be uncontrolledReact - 一个组件正在将文本类型的受控输入更改为不受控制
【发布时间】：2020-11-04 03:59:03
【问题描述】：

我正在尝试对我的组件进行排序

<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 的值最初是日期。当我尝试从下拉列表中更改它时，会发生错误。

【问题讨论】：

标签： javascript reactjs react-redux

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

出现此错误是因为您试图将不受控制的输入更改为受控输入。此处输入的值基于组件的状态，但在第一次渲染期间，状态未定义，这意味着输入不受控制，但是当您在输入字段中写入内容时，它受状态控制并发生此错误。要摆脱这种情况，请将您的状态设置为空字符串 ("")。因此输入字段将由第一次渲染时的状态控制。

【讨论】：