javascript - 如何使用 useState 钩子(Hook)同时设置多个状态？

Question

我想用 useState 组合几个状态并同时处理它们钩子(Hook)，检查下面的例子，它更新了用户输入的一些文本:

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>

该代码运行良好，但正如您所见，我使用 2 个函数分别处理姓名和年龄。这违背了我保存一些代码的意图。是否可以仅使用 1 个函数分别更改姓名和年龄？试过这个，但显然它会用相同的值更新两者。

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

使用单个 useState Hook 无法同时设置多个不同的状态。您可以单独设置它们，
例子:

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

或将所有状态放入一个对象中，并使用 useState Hook 更新该对象。
来源: https://daveceddia.com/usestate-hook-examples/
例子:

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