map方法渲染的表单提交时每次仅获取数组最后一个元素是什么原因？

• 语法错误：你写的map回调函数用大括号包裹了逻辑，但没有显式写return返回表单元素，导致遍历过程没有生成对应数量的独立表单，最终仅残留最后一次遍历的相关绑定，触发提交时自然只能拿到最后一个doc的值。
• 闭包引用问题：如果数组变量声明、遍历逻辑存在变量共享的情况，所有提交事件的回调函数捕获的是同一个doc引用，遍历结束后这个引用指向数组最后一个元素，也会导致该问题。
• React渲染规则问题：如果没有给遍历生成的form元素添加唯一的key属性，React的diff算法会错误复用表单节点，导致事件绑定异常，也会出现所有提交拿到最后一个值的情况。

1. 修正map返回写法 #

箭头函数如果用大括号包裹代码块必须显式return，或者去掉大括号直接返回表达式：

// 写法1：省略大括号直接返回
{
  ArrayName.map((doc) => 
    <form onSubmit={(e) => handleRename(e, doc)}>
      {/* 表单内容 */}
    </form>
  )
}

// 写法2：大括号内加return
{
  ArrayName.map((doc) => {
    return <form onSubmit={(e) => handleRename(e, doc)}>
      {/* 表单内容 */}
    </form>
  })
}

2. 添加唯一key属性 #

给每个form添加唯一标识的key，避免React节点复用异常：

{
  ArrayName.map((doc) => 
    <form 
      key={doc.id} // 用doc的唯一字段作为key，不要用数组下标
      onSubmit={(e) => handleRename(e, doc)}
    >
      {/* 表单内容 */}
    </form>
  )
}

3. 可选：柯里化固化doc参数 #

如果仍存在作用域问题，可以把处理函数改造成柯里化形式，提前固化doc的值：

// 定义柯里化的提交处理函数
const handleRename = (doc) => (e) => {
  console.log(doc);
}

// 绑定时直接传入当前doc
<form onSubmit={handleRename(doc)}>

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