如何在React中向动态表格添加多值并解决选中值堆叠显示问题

你将店铺、配置两个关联的行字段分开存储在两个独立数组中，渲染逻辑存在错误：

• 遍历shop数组生成行时，第二列直接输出了整个profil数组，JS渲染时会自动将数组内的所有元素拼接为字符串输出，因此每次新增行后profil数组新增的元素都会被叠加展示，出现P2P2这类堆叠效果
• 店铺列因为取的是遍历到的单个shop数组元素，因此展示正常

将每行的关联数据合并存在同一个对象数组中，避免两个独立数组的同步问题：

1. 调整状态定义

// 删掉原来分开的shop、profil数组，改用统一的行数据数组
const [tableData, setTableData] = useState([]);
const [formShop, setFormShop] = useState(undefined);
const [formProfil, setFormProfil] = useState(undefined);

2. 修改提交逻辑

function handleSubmit(e){
  e.preventDefault();
  // 每次提交把两个字段拼成一个行对象存入数组
  setTableData(current => [...current, {
    shop: formShop,
    profile: formProfil
  }]);
  // 可选：提交后清空选择器的值，方便下一次输入
  setFormShop(undefined);
  setFormProfil(undefined);
}

3. 修正表格渲染逻辑

<tr>
  {tableData.map((item, index) => (
    <tr key={index}>
      <td>{item.shop}</td>
      <td>{item.profile}</td>
    </tr>
  ))}
</tr>

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