React TableData组件点击仅新增1行，如何实现可复用多行动态渲染？

问题核心原因 #

你当前的实现仅存储和渲染单条支出数据，没有保存所有历史提交的支出记录，所以永远只会显示1行。

修复步骤 #

1. 调整状态结构，存储多条支出数据
   在App组件中声明数组类型的状态，用于保存所有提交的支出记录，初始值为空数组：

// App组件内
import { useState } from 'react'
const [expenseList, setExpenseList] = useState([])

2. 表单提交时追加新数据到数组
   Form组件提交表单时，不要直接覆盖状态，要将新的表单值追加到原有数组末尾，注意遵循React状态不可变原则，使用展开运算符生成新数组：

// Form组件提交逻辑
const handleSubmit = (e) => {
  e.preventDefault()
  // 把新的表单值追加到支出列表
  props.setExpenseList(prevList => [...prevList, formValues])
  // 提交后清空表单
  setFormValues({payment: '', purchase: '', date: '', location: '', price: ''})
}

3. 遍历数组渲染多行TableData
   在放置表格的父组件（通常是App或Table容器组件）中，遍历expenseList数组，每一条数据对应渲染一个TableData组件，必须给每一项添加唯一key属性：

// 表格渲染位置
<tbody>
  {expenseList.map((expenseItem, index) => (
    <TableData 
      key={index} // 正式环境建议替换为每条数据的唯一ID，比如uuid
      userState={expenseItem}
    />
  ))}
</tbody>

4. 可选：完善删除功能
   如果要实现删除按钮功能，把当前项的索引/唯一ID传递到父组件，过滤掉对应项即可更新列表。

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