如何用useState hook同时设置多个state？

Question

I would like to combine several states and handle them at the same time with useState hook, check the following example which updates some text on user input:

 const {useState} = React; const Example = ({title}) => { const initialState = { name: 'John', age: 25 }; const [{name, age}, setFormState] = useState(initialState); const handleNameChange = (e) => { setFormState({ name: e.target.value, age }); }; const handleAgeChange = (e) => { setFormState({ name, age: e.target.value }) }; return ( <form onSubmit={e=>e.preventDefault()}> <input type='text' id='name' name='name' placeholder={name} onChange={handleNameChange} /> <p>The person's name is {name}.</p> <br /> <label htmlFor='age'>Age: </label> <input type='text' id='age' name='age' placeholder={age} onChange={handleAgeChange} /> <p>His/her age is {age}.</p> </form> ); }; // Render it ReactDOM.render( <Example />, document.getElementById("react") );

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script> <div id="react"></div>

The code works well, but as you can see I'm using 2 functions to handle name and age separately., which was against my intention to save some code. Is it possible to just use 1 function to change name and age separately? Tried this but obviously it would update both with the same value.

 const {useState} = React; const Example = ({title}) => { const initialState = { name: 'John', age: 25 }; const [{name, age}, setFormState] = useState(initialState); const handleChange = (e) => { setFormState({ name: e.target.value, age: e.target.value }); }; return ( <form onSubmit={e=>e.preventDefault()}> <input type='text' id='name' name='name' placeholder={name} onChange={handleChange} /> <p>The person's name is {name}.</p> <br /> <label htmlFor='age'>Age: </label> <input type='text' id='age' name='age' placeholder={age} onChange={handleChange} /> <p>His/her age is {age}.</p> </form> ); }; // Render it ReactDOM.render( <Example />, document.getElementById("react") );

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script> <div id="react"></div>

Answer 1

It's not possible to set several different states at the same time with a single useState hook. You can either set them separately, example:

const [userName, setUserName] = useState('');
const [password, setPassword] = useState('');

or put all of the states into an object, and update that object using the useState hook. Source: https://daveceddia.com/usestate-hook-examples/ Example:

const [form, setState] = useState({
  username: '',
  password: ''
});

const updateField = e => {
    setState({
      ...form,
      [e.target.name]: e.target.value
    });
  };

return (
    <form onSubmit={printValues}>
      <label>
        Username:
        <input
          value={form.username}
          name="username"
          onChange={updateField}
        />
      </label>
      <br />
      <label>
        Password:
        <input
          value={form.password}
          name="password"
          type="password"
          onChange={updateField}
        />
      </label>
      <br />
      <button>Submit</button>
    </form>
  );

Answer 2

You have a couple options to get your intended effect.

You could, for example, make a single function factory.

 const {useState} = React; const Example = ({title}) => { const initialState = { name: 'John', age: 25 }; const [{name, age}, setFormState] = useState(initialState); const handleChange = key => e => { const newValue = e.target.value setFormState(oldState => ({...oldState, [key]: newValue })); }; return ( <form onSubmit={e=>e.preventDefault()}> <input type='text' id='name' name='name' placeholder={name} onChange={handleChange('name')} /> <p>The person's name is {name}.</p> <br /> <label htmlFor='age'>Age: </label> <input type='text' id='age' name='age' placeholder={age} onChange={handleChange('age')} /> <p>His/her age is {age}.</p> </form> ); }; // Render it ReactDOM.render( <Example />, document.getElementById("react") );

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script> <div id="react"></div>

Alternatively, if you need a function factory with more flexibility (eg if you were trying to store other state in there), you could use useReducer() instead of useState(), then curry the dispatch function. As a rough, untested example

const reducer = (state, {type, payload}) => {
  switch (type) {
    case 'name': return {...state, name: payload}
    case 'age': return {...state, age: payload}
    default: throw new Error()
  }
}

const [{name, age}, dispatch] = useReducer(reducer, { name: 'john', age: 25 })
const makeEventListener = type => e => dispatch({type, payload: e.target.value})
// Now, you can use either use makeEventListener, or dispatch() directly
return <input type="text" value={name} onChange={makeEventListener('name'))

Lastly, it is possible to do exactly what you're saying, have one function that'll just update the state no matter who called it, by using of refs. But this is not a recommended approach.