亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

請告訴我為什么這個表達式不起作用

請告訴我為什么這個表達式不起作用

神不在的星期二 2022-11-27 15:47:52
反應代碼:const [state, setState] = useState({login:'', password: ''});const changeHandler  = (e) =>{    setState({[e.target.name]: e.target.value});}return(    <div className='login-wrapper'>        <form onSubmit={(e) => submitHandler(e)}>            <Input color='primary'                   margin='dense'                   placeholder='login'                   type='text'                   style={{margin:'20px', width:'300px'}}                   name='login'                   value={state.login}                   onChange={(e) => changeHandler(e)}/>       </form>  </div>)}錯誤:組件正在將密碼類型的受控輸入更改為不受控制。輸入元素不應從受控切換到不受控(反之亦然)。在組件的生命周期內決定使用受控或非受控輸入元素。
查看完整描述

2 回答

?
翻閱古今

TA貢獻1780條經驗 獲得超5個贊

從文檔中useState:


與類中的 this.setState 不同,更新狀態變量總是替換它而不是合并它。


如果您使用對象作為useState掛鉤的值,則對其的更新必須替換所有值。


發生的情況是您正在更新login,而不是替換password。所以密碼輸入大概是拋出警告的那個。密碼設置為字符串,然后變為undefined.


解決方案很簡單,在更新之前將以前的狀態值傳播到新對象中:


setState({...state, [e.target.name]: e.target.value});

最佳的變更處理程序也會利用更新程序的功能形式,看起來像這樣:


// Destructure the event for cleaner syntax and avoiding the pitfall of pooled events

const changeHandler  = ({ target: {name, value} }) => {

  // Use a functional update to ensure we always have the most recent copy of state

  setState(prev => ({ ...prev, [name]: value }));

}


查看完整回答
反對 回復 2022-11-27
?
紫衣仙女

TA貢獻1839條經驗 獲得超15個贊

e.target.name可能是未定義的,因此value={state.login}作為道具返回undefined,它將組件切換到非受控狀態。

修復這個:

const loginChangeHandler = (e) => setState({...state, login: e.target.value});


查看完整回答
反對 回復 2022-11-27
  • 2 回答
  • 0 關注
  • 138 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號