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

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

}

Answer 2

e.target.name可能是未定义的，因此value={state.login}作为道具返回undefined，它将组件切换到非受控状态。

修复这个：

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