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

Question

React code:

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

Error:

A component is changing a controlled input of type password to be uncontrolled. Input elements should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component.

Answer 1

e.target.name is probably coming through as undefined, so value={state.login} as a prop returns undefined , which switches the component to non-controlled.

Fix with this:

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

Answer 2

From the docs on useState :

Unlike this.setState in a class, updating a state variable always replaces it instead of merging it.

If you use an object as the value of a useState hook, an update to it must replace all values.

What is happening is you are updating login , but not replacing password . So the password input is presumably the one throwing the warning. The password was set to a string, then it becomes undefined .

The solution is simple, spread the previous state values into the new object before updating it:

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

The most optimal change handler would also take advantage of the functional form of the updater and look something like this:

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