之前在寫from表單組件的時(shí)候首妖，調(diào)試的時(shí)候總會(huì)遇到react報(bào)錯(cuò):
Warning: A component is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component.*
但是這個(gè)報(bào)錯(cuò)只會(huì)在首次渲染組件是出現(xiàn)炫贤，在后面調(diào)試的時(shí)候就沒(méi)了，所以很迷惑尔邓。在查詢一番之后灾常，終于了解了根本原因。
這里記錄一下铃拇，供后面自己查看，也許可以幫到同樣遇到這個(gè)問(wèn)題的你
還原報(bào)錯(cuò)示例代碼：
const Input = () => {
const [val, setVal] = useState();
// code ...
return <input value={val} onChange={(e)=>{setVal(e.target.value)}} />
}
上面代碼在渲染后第一次輸入時(shí)沈撞，就會(huì)有上面貼出報(bào)錯(cuò)慷荔。
首先來(lái)講一下原因
我們?cè)?code>val初始化的時(shí)候并沒(méi)有給值，所以val的初始化值就是undefined缠俺，這就導(dǎo)致了首次渲染出的input是這樣的<input value=undefined/>,因此react就判定這是一個(gè)非受控組件显晶。
而一旦開始輸入，觸發(fā)了onChange回調(diào)壹士，就是給val賦值磷雇，這時(shí)input就成為了受控的input。所以我們就會(huì)得到一開始貼出的那個(gè)錯(cuò)誤躏救。從錯(cuò)誤的描述也可以很容易發(fā)現(xiàn)問(wèn)題唯笙。
A component is changing an uncontrolled input of type text to be controlled.
知道原因了之后，解決問(wèn)題就很簡(jiǎn)單了
- 我們可以給
val一個(gè)初始值
const [val, setVal] = useState('');
- 給input的
value屬性一個(gè)初始值
<input value={val || ''}/>
總結(jié)一下盒使，這個(gè)問(wèn)題出現(xiàn)的根源還是自己對(duì)概念理解不夠深入崩掘，沒(méi)有理解受控和非受控的本質(zhì)。
