react hooks 太多的useState 顯得很冗余，有沒有什么規整的方法呢？

 

 

import React, { useState } from 'react'

export default function Test() {
  const [state, setState] = useState({
    username: 'admin',
    password: '123456',
  })

  const handleInput = (e, field) => {
    setState((prevState) => {
      return { ...prevState, [field]: e.target.value }
    })
  }

  const handleLogin = () => {
    const { username, password } = state
    console.log(username, password)
  }

  return (
    <div>
      <div>
        <input
          value={state.username}
          onChange={(e) => handleInput(e, 'username')}
        ></input>
      </div>
      <div>
        <input
          value={state.password}
          onChange={(e) => handleInput(e, 'password')}
        ></input>
      </div>
      <button onClick={handleLogin}>登錄</button>
    </div>
  )
}