如何在useReducer中调用对象？React双输入表单提交报错求解

错误根因 #

你遇到的报错来自多输入框绑定对象状态时的3个典型错误：

• 更新状态时未保留原有对象的属性，每次修改其中一个输入框就会覆盖另一个输入框的存储值
• 输入框未设置与状态对象key完全匹配的name属性，导致动态赋值时找不到对应字段
• 按下回车键触发了表单默认提交行为，页面刷新导致状态丢失

修复步骤 #

1. 初始化状态时预设对应字段，避免取值时报undefined错误

import { useState } from 'react'

const MultipleInputs = () => {
  // 预设和输入框对应的字段
  const [person, setPerson] = useState({
    username: '',
    email: ''
  })
  // 存储要展示的提交数据
  const [submittedData, setSubmittedData] = useState([])

2. 给所有输入框添加对应name属性，和状态对象的key保持完全一致

return (
    <>
      <form onSubmit={handleSubmit}>
        <input 
          type="text" 
          name="username" 
          value={person.username} 
          onChange={handleChange}
          placeholder="请输入用户名"
        />
        <input 
          type="email" 
          name="email" 
          value={person.email} 
          onChange={handleChange}
          placeholder="请输入邮箱"
        />
        <button type="submit">提交</button>
      </form>
      {/* 展示区域 */}
      <div>
        {submittedData.map((item, index) => (
          <p key={index}>用户名：{item.username}，邮箱：{item.email}</p>
        ))}
      </div>
    </>
  )

3. 修改状态更新逻辑，更新时先展开原有对象保留所有属性

const handleChange = (e) => {
    const fieldName = e.target.name
    const fieldValue = e.target.value
    // 先展开原有person的所有属性，再覆盖当前修改的字段
    setPerson({...person, [fieldName]: fieldValue})
  }

4. 绑定表单提交事件，阻止默认刷新行为，处理展示逻辑

const handleSubmit = (e) => {
    // 阻止表单默认提交刷新页面的行为
    e.preventDefault()
    // 简单判空后存入展示列表
    if(person.username.trim() && person.email.trim()) {
      setSubmittedData([...submittedData, {...person}])
      // 提交后清空输入框
      setPerson({username: '', email: ''})
    }
  }
}

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