如何在MERN栈Bootstrap动态字段表单中获取数据？

在MERN应用的Bootstrap表单中，使用react-tag-component组件让用户选择武术流派（如judo、bjj），选中的流派会存入selected数组（每个元素包含value和label属性）。遍历该数组为每个选中的流派生成rank（段位）和weightClass（体重级别）输入框，输入框的name属性设置为rank${item.label}（如rankjudo）和weightClass${item.label}（如weightClassjudo），通过handleChange函数将输入值存入inputData对象。

目前通过inputData.rankJudo可以直接获取对应段位，但遍历selected数组生成目标格式的数组时，尝试inputData.rank + item.label会得到undefinedjudo这类错误结果。期望生成的styles数组格式如下：

[
 { 
   styleName: "judo",
   rank: "Yellow Belt",
   weightClass: "73kg"
 },
 {
   styleName: "bjj",
   rank: "blue belt",
   weightClass: "165lbs",
 }
]

问题核心是动态属性名的访问方式错误：你试图通过拼接字符串的方式访问对象属性，但正确的做法是使用JavaScript的方括号语法来访问动态生成的属性名。

修改后的handleSubmit函数 #

const handleSubmit = async (e) => {
  e.preventDefault();

  let styles = [];

  // 确保selected数组存在且不为空
  if (selected?.length > 0) {
    styles = selected.map((item) => ({
      styleName: item.label,
      // 用方括号访问动态属性名
      rank: inputData[`rank${item.label}`] || '',
      weightClass: inputData[`weightClass${item.label}`] || ''
    }));
  }
  console.log("styles ", styles);
};

关键优化点 #

• 使用selected?.length > 0进行空值校验，避免selected为null或空数组时出现错误
• 用方括号语法inputData[rank${item.label}]正确获取对应输入框的值，替代错误的字符串拼接方式
• 添加|| ''兜底，确保即使输入框为空，字段值也不会是undefined
• 直接用map方法生成新数组，替代先声明空数组再push的写法，代码更简洁

其他说明 #

原表单代码和handleChange函数无需修改，因为handleChange已经通过[name]: value的正确语法将输入值存入inputData对象中。

内容的提问来源于stack exchange，提问作者Stephen Scott Moore