如何将多个独立useState钩子合并为单个对象形式以精简代码？

直接把所有分散的状态字段合并到同一个对象中，用单个useState声明即可，React原生支持对象类型的状态：

const [formState, setFormState] = useState({
  country: "",
  city: "",
  population: "",
  location: "",
  temp_min: ""
})

注意：React的useState不会自动合并对象的属性，更新状态时必须先展开原有状态，再覆盖要修改的字段，避免丢失其他未修改的属性。
更新状态示例：

// 单独更新country字段
setFormState(prevState => ({
  ...prevState,
  country: "中国"
}))

如果是表单场景，可以封装通用更新函数，不用给每个字段写单独的更新逻辑：

const handleFieldChange = (e) => {
  const { name, value } = e.target
  setFormState(prev => ({
    ...prev,
    [name]: value
  }))
}

对应输入组件只要保证name属性和状态字段名一致即可：

<input name="country" value={formState.country} onChange={handleFieldChange} />
<input name="city" value={formState.city} onChange={handleFieldChange} />

如果后续存在多字段联动更新、状态校验、批量重置等复杂逻辑，可以用useReducer做更规范的状态管理：

// 先定义状态更新规则
const formReducer = (state, action) => {
  switch (action.type) {
    case "UPDATE_FIELD":
      return { ...state, [action.payload.field]: action.payload.value }
    case "RESET_FORM":
      return { country: "", city: "", population: "", location: "", temp_min: "" }
    default:
      return state
  }
}

// 组件内声明状态
const [formState, dispatch] = useReducer(formReducer, {
  country: "",
  city: "",
  population: "",
  location: "",
  temp_min: ""
})

更新状态示例：

// 更新country字段
dispatch({
  type: "UPDATE_FIELD",
  payload: { field: "country", value: "中国" }
})
// 一键重置所有字段
dispatch({ type: "RESET_FORM" })

• 普通场景优先选单个useState方案，足够精简且满足需求
• 不要直接修改state对象本身（比如formState.country = "xxx"），必须通过setFormState/dispatch触发状态更新，否则组件不会重新渲染

内容的提问来源于stack exchange，提问作者Sami