React - 一個組件正在將文本類型的受控輸入更改為不受控制

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>

我在 select 標簽中有錯誤。 出現錯誤A component is changing a controlled input of type text to be uncontrolled值，最初是日期。 當我嘗試從下拉列表中更改它時，會發生錯誤。

Answer 1

你的問題的根源是你的<input>的價值。 如果 ReactJS 接收undefined作為輸入值，則該輸入被視為“不受控制”，您不應將其更改為“受控”。

關於 ReactJS 中的不受控輸入， 這里有一個非常徹底的答案。

Answer 2

發生此錯誤是因為您試圖將不受控制的輸入更改為受控輸入。 這里輸入的值基於組件的 state 但在第一次渲染期間 state 未定義，這意味着輸入不受控制，但是當您在輸入字段中寫入內容時，它由 Z9ED39E2EA931586B6EZEF573 控制並發生此錯誤。 要擺脫這種情況，請將您的 state 設置為空字符串 ("")。 因此輸入字段將在第一次渲染時由 state 控制。