React - API调用来设置多个状态变量(更好的替代方案)

import React, { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('');

  // ...

  return (
    <div>
      <p>You clicked {count} times.</p>
      <input value={name} onChange={e => setName(e.target.value)} />
    </div>
  );
}

import React, { useReducer } from 'react';

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { ...state, count: state.count + 1 };
    case 'decrement':
      return { ...state, count: state.count - 1 };
    case 'setName':
      return { ...state, name: action.payload };
    default:
      throw new Error();
  }
}

function Example() {
  const [state, dispatch] = useReducer(reducer, { count: 0, name: '' });

  // ...

  return (
    <div>
      <p>You clicked {state.count} times.</p>
      <input value={state.name} onChange={e => dispatch({ type: 'setName', payload: e.target.value })} />
    </div>
  );
}