React中如何绑定表单提交的员工数据到State并更新组件渲染

先搞懂为什么你现在的写法提交后看不到新内容 #

• 你目前把empInfo定义在App组件外层，属于页面加载后就固定的静态常量，哪怕你在createEmployee里抓到了新的员工数据，直接往这个数组里push内容，React也完全感知不到数据变化，不会触发页面重新渲染，永远看不到新加的条目。
• React的核心规则：只有State（状态）发生变化，才会触发组件重新渲染、更新页面展示的内容。

具体改造步骤（完全兼容你现有代码结构，不额外拆分表单组件） #

第一步：导入State钩子，把静态员工列表改造成状态 #

你现在是函数组件写法，需要用到React提供的useState钩子来管理可变化的员工列表：

// 原来的import语句里加上useState
import { useLayoutEffect, useState } from 'react';

function App() {
  // 把原来写在组件外面的empInfo，作为初始值放进状态里
  const [employeeList, setEmployeeList] = useState([
    {
      firstName: "Jack",
      lastName:"Smith",
      age:"21",
    },
    {
      firstName: "steph",
      lastName:"garcia",
      age:"21",
    },
    {
      firstName: "joe",
      lastName:"nieto",
      age:"21",
    },
    {
      firstName: "Jack",
      lastName:"josh",
      age:"21",
    }
  ])

第二步：改造createEmployee函数，提交时更新状态 #

原来你写的收集表单值的逻辑可以复用，只需要把最后要“把新员工加到列表里”的逻辑，换成通过状态更新方法提交即可：

function createEmployee(e){
  e.preventDefault()
  // 简化取值逻辑，不用通过children找元素，直接通过表单name属性拿到输入值
  const employee = {
    firstName: e.target.name.value,
    lastName: e.target.lname.value,
    age: e.target.age.value,
  }
  // 核心：更新状态 —— prevList是React自动传入的、更新前的最新列表内容
  // 把旧列表的内容全部展开，加上新提交的员工，生成全新的数组
  setEmployeeList(prevList => [...prevList, employee])
  // 可选：提交完清空输入框，用原生表单自带的方法即可
  e.target.reset()
}

注意：绝对不要直接写employeeList.push(employee)然后指望页面更新。因为React判断状态是否变化是靠引用对比的，直接修改原数组不会触发重渲染，必须生成一个全新的数组让React感知到变化。

第三步：把列表渲染源从静态empInfo换成状态employeeList #

原来写的map遍历逻辑几乎不用改，只需要把遍历的数组换成我们现在管理的状态列表即可，传给Employee组件的props完全不需要调整：

{employeeList.map((employee, index) =>{
  const {firstName, lastName, age} = employee;
  return(
    // key属性是React要求的列表项标识，新手阶段先用索引当值就行，避免控制台警告
    <Employee 
      key={index}
      firstName={firstName} 
      lastName = {lastName} 
      age = {age}
    />
  );
})}

你原来写的<Kounter />等其他组件完全不用动，保持原样即可。

这套逻辑的设计思路 #

• 为什么要把员工列表放进State？
  这是React“数据驱动视图”的核心逻辑：你不需要手动写JS把新员工的HTML节点塞到页面上，只要状态更新了，React会自动帮你重新渲染整个员工列表，比原生DOM操作更稳定、写起来更简单。
• 为什么更新状态要生成新数组而不是直接改原数组？
  React为了快速判断数据有没有变，只会对比状态的内存引用：如果数组还是原来那个引用，哪怕你往里面加了100条数据，React也会觉得“数据没变化，不用重新画页面”。用展开运算符生成新数组，相当于告诉React“这是一份全新的列表，快更新页面吧”。
• 为什么不用拆分表单组件也能实现？
  你现在所有的逻辑都在App组件内部闭环：表单提交事件由App处理，员工列表存在App的状态里，遍历渲染列表的逻辑也在App里，Employee组件只负责接收props展示内容，和你现有项目的其他组件（比如Kounter、Employee本身的代码）完全兼容，不需要额外改结构。

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