React：接收表单输入对象数据并添加至数组列表

问题分析 #

现有代码存在三个核心问题：

• App.js中直接传递setUserData给子组件，会覆盖原有数组而非追加新数据
• AddUserForm定义的用户对象键名（如userName）和Users组件中使用的键名（如name）不匹配
• 表单提交后未清空输入框，影响后续输入体验

分步修改方案 #

1. 修改App.js：实现数组追加逻辑

不要直接把setUserData传给子组件，而是定义一个处理函数，接收新用户数据后通过扩展运算符追加到原数组：

function App() {
  const [userData, setUserData] = useState([]);

  // 处理新增用户的函数，实现数据追加
  const handleAddUser = (newUser) => {
    // 基于原状态创建新数组，避免直接修改原数据
    setUserData(prevUsers => [...prevUsers, newUser]);
  };

  return (
    <main>
      <div className="form__wrap">      
        {/* 传递自定义处理函数，而非直接传setUserData */}
        <AddUserForm addedUser={handleAddUser}/>
      </div>
      <div className="user__wrap">
        <Users newUser={userData}/>
      </div>
    </main>
  );
}

2. 统一用户对象的键名（二选一即可）

方案A：修改AddUserForm的对象键名，匹配Users组件的使用

// AddUserForm.js中修改userData的键名
const userData = {
  name: name,
  email: email,
  age: age,
  phone: phone,
  image: image
}

方案B：修改Users组件的取值键名，匹配AddUserForm的定义

// Users.js中修改map的取值
<UserCard
  key={i}
  name={el.userName}
  email={el.userEmail}
  age={el.userAge}
  phone={el.userPhone}
  image={el.userImage}
/>

3. 表单提交后清空输入框（可选但推荐）

在AddUserForm的addUserHandler末尾，重置所有输入状态：

const addUserHandler = (e) => {
  e.preventDefault();

  const userData = {
    // 这里使用统一后的键名
    name: name,
    email: email,
    age: age,
    phone: phone,
    image: image
  };

  addedUser(userData);

  // 清空输入框
  setName('');
  setEmail('');
  setPhone('');
  setAge('');
  setImage('');
};

4. 优化key值（可选）

尽量不要用数组索引作为key，建议给每个用户添加唯一标识（比如用Date.now()生成临时ID）：

// AddUserForm.js中添加id
const userData = {
  id: Date.now(), // 生成唯一临时ID
  name: name,
  email: email,
  age: age,
  phone: phone,
  image: image
};

// Users.js中用id作为key
<UserCard
  key={el.id}
  // ...其他属性
/>

完成以上修改后，每次提交表单，新的用户数据就会追加到数组末尾，Users组件也能正确渲染所有用户卡片。

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