React表单循环中动态拼接索引获取字段值出现NaN问题

• 你的代码存在两个关键错误：
  1. 动态属性访问方式错误：event.target.directorName + index.value的写法完全错误——index是map循环的索引变量，没有value属性，这种拼接会导致字符串与undefined相加输出NaN。正确的动态访问表单元素应该使用方括号语法，把拼接后的字段名作为键传入。
  2. 数组生成逻辑问题：[...Array(aboutDetails.companyDirectors)]生成的数组包含空元素，map方法会跳过这些空元素，导致循环次数不足。需要用fill(null)填充数组，确保每个位置都有可遍历的元素。

修正后的代码示例（两种写法） #

写法1：for循环遍历

const handleSubmit = (event) => {
  event.preventDefault();
  const directorTotal = aboutDetails.companyDirectors;
  // 按董事总数循环，从1开始对应字段名的序号
  for (let i = 1; i <= directorTotal; i++) {
    // 方括号语法动态拼接字段名
    const directorName = event.target[`directorName${i}`].value;
    console.log(`第${i}位董事：`, directorName);
    // 此处可将值存入状态或进行后续处理
  }
};

写法2：map遍历填充后的数组

const handleSubmit = (event) => {
  event.preventDefault();
  const directorTotal = aboutDetails.companyDirectors;
  // 生成对应长度的数组并填充空值，确保map能遍历所有次数
  Array(directorTotal).fill(null).forEach((_, index) => {
    const currentNum = index + 1;
    const directorName = event.target[`directorName${currentNum}`].value;
    console.log(`第${currentNum}位董事：`, directorName);
  });
};

额外建议 #

如果采用React受控组件模式，更推荐将所有董事姓名维护在一个数组状态中，比如：

const [directors, setDirectors] = useState(['']); // 初始一个空字段

// 新增董事字段
const addDirector = () => {
  setDirectors([...directors, '']);
};

// 更新单个董事姓名
const updateDirectorName = (index, value) => {
  const newDirectors = [...directors];
  newDirectors[index] = value;
  setDirectors(newDirectors);
};

这种方式不需要通过event.target动态取值，直接操作数组状态更符合React的设计理念，也更易维护。

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