请告诉我为什么这个表达式不起作用

Question

反应代码：

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>)}

错误：

组件正在将密码类型的受控输入更改为不受控制。输入元素不应从受控切换到不受控（反之亦然）。在组件的生命周期内决定使用受控或非受控输入元素。

Answer 1

从文档中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 eventsconst changeHandler&nbsp; = ({ target: {name, value} }) => {&nbsp; // Use a functional update to ensure we always have the most recent copy of state&nbsp; setState(prev => ({ ...prev, [name]: value }));}

Answer 2

e.target.name可能是未定义的，因此value={state.login}作为道具返回undefined，它将组件切换到非受控状态。修复这个：const loginChangeHandler = (e) => setState({...state, login: e.target.value});