如何实现两组数组同步循环渲染？React表单开发问题咨询

你的问题核心是要让div数组和type数组的元素一一对应渲染，而不是嵌套循环生成所有组合。因为两个数组长度相同，直接利用map方法的第二个参数（索引）就能实现同步匹配：

{formData.div.map((clsName, index) => (
  <div key={index} className={clsName}>
    <input type={formData.type[index]} />
  </div>
))}

关键说明： #

• map方法的第二个参数index会返回当前元素在数组中的位置，利用这个索引可以从type数组中取出对应位置的类型值。
• 记得给每个循环生成的元素加上key属性（这里用index作为临时key，如果有业务唯一标识建议用对应值），符合React列表渲染的规范。
• 这种方式只需要一次循环，就能实现两个数组的同步遍历，确保每个div对应一个匹配类型的input。

逻辑验证： #

你的formData.type和formData.div长度均为8，索引从0到7一一对应，所以每个div的类名和input的类型会完全匹配你预期的渲染效果。

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