React点击提交按钮获取表单数据并生成展示Div的实现方法

原代码存在的问题 #

• 用于存储提交数据的list被定义为对象，无法存储多条用户信息，应该改为数组
• 提交函数formSubmit中的setList语法错误，连续调用会导致状态覆盖，且没有正确添加新数据
• 展示区域仅渲染了当前输入框的值，没有遍历历史提交的数据

修改后的RegisterApp.js代码 #

import React, { useState } from 'react'

function RegisterApp() {
  // 初始化输入框状态
  const [name, setName] = useState('Khun Neary')
  const [position, setPosition] = useState('Designer')
  // 将list改为数组，存储所有提交的用户信息
  const [userList, setUserList] = useState([])

  const formSubmit = (e) => {
    e.preventDefault()
    // 创建新的用户对象
    const newUser = { name, position }
    // 用函数式更新添加新用户到数组，避免状态依赖问题
    setUserList(prevList => [...prevList, newUser])
    // 清空输入框（可选）
    setName('')
    setPosition('')
  }

  return (
    <div className='container'>
      <form className='form-box' onSubmit={formSubmit}>
        <button type="button">Upload Profile</button>
        
        <input 
          type="text" 
          placeholder='Name...'
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
       
        <input
          type="text" 
          placeholder='Position...'
          value={position}
          onChange={(e) => setPosition(e.target.value)}
        />
        <button type="submit">Submit</button>
      </form>

      <div className='register-box'>
        {/* 遍历userList数组，生成每个用户的展示卡片 */}
        {userList.map((user, index) => (
          <div key={index} className='sub-reg-box'>
            <div className='img-box'></div>
            <div className='detail-box'>
              <h2>{user.name}</h2>
              <h4>{user.position}</h4>
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}

export default RegisterApp

关键修改说明 #

1. 状态类型调整：把list改为userList并初始化为空数组，这样可以存储多条用户提交的数据
2. 提交逻辑修正：在formSubmit中创建包含姓名和职位的新对象，通过扩展运算符将其添加到原有数组中，使用函数式更新确保获取最新的状态值
3. 渲染逻辑优化：使用map遍历userList数组，为每个用户生成对应的展示Div，添加key属性确保React渲染性能
4. 细节优化：给按钮添加type属性（上传按钮设为button避免触发表单提交，提交按钮设为submit），可选清空输入框提升用户体验

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