React中map作用域内按钮onClick无法获取父级map索引问题

• 问题根源：你在按钮onClick回调的参数声明里重复定义了index，React的onClick事件回调默认只会传递事件对象e这一个入参，你手动声明的第二个index参数本身是undefined，还遮蔽了父级map作用域下的正确索引值，导致传入addValueField的索引无效触发报错。
• 修复方案：直接删除onClick回调中多余的index参数，直接引用父作用域的index即可，修改后的按钮代码如下：

<button onClick={(e) => addValueField(e, index)}>
  Add another value
</button>

可选优化建议 #

为了符合React不可变更新原则，避免直接修改原状态引用引发的隐性问题，同时规避闭包陷阱，可以调整addValueField的实现：

const addValueField = (e, index) => {
  e.preventDefault();
  setVariation(prevVariation => {
    return prevVariation.map((item, i) => {
      if (i === index) {
        return {
          ...item,
          // 生成新的value数组，不修改原状态的引用
          value: [...item.value, ""]
        }
      }
      return item
    })
  })
};

另外如果你的列表存在插入、删除、排序操作，建议给每个列表项添加唯一ID作为key属性值，仅用索引当key可能会引发渲染异常。

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