React onClick事件传递映射Key值异常：为何获取到SyntheticBaseEvent而非目标Key

嘿，我一眼就瞅出问题所在啦！你遇到的这个情况，是因为箭头函数的参数声明把你要传的key给覆盖了～

错误原因 #

你写的onClick={(key) => handleDeleteIncome(key)}里，这个key参数其实并不是你map循环里拿到的那个键值！React的点击事件回调默认会把点击事件对象作为第一个参数传递进来，你这里用key这个名字接收了事件对象，自然就把原本的key变量覆盖了，所以打印出来的是SyntheticBaseEvent而不是你想要的字符串键。

解决方案 #

给你两种简单的修复方式：

方式1：直接传递外部的key

去掉箭头函数里的参数声明，直接在回调里引用map循环中的key变量：

Object.entries(userWalletIncomes).map(([key, value]) => { 
  return ( 
    <div id="incomeTable" className="text-left mx-auto flex" key={key}> 
      <p className="w-32 border p-1 capitalize">{key} :</p> 
      <p className="w-32 border p-1 text-green-500">{value}€</p> 
      <button onClick={() => handleDeleteIncome(key)}>
        <i className="fas fa-times text-red-400 border p-1"></i>
      </button> 
    </div> 
  ) 
})

方式2：同时获取事件对象和key（如果需要用到事件的话）

如果你之后需要用到点击事件的相关操作，可以把事件对象作为第一个参数接收，再传入key：

// 先调整handleDeleteIncome的参数顺序，比如：
const handleDeleteIncome = (e, key) => {
  // e是事件对象，key是你要的键值
  console.log(key);
  // 其他逻辑...
}

// 然后修改onClick：
Object.entries(userWalletIncomes).map(([key, value]) => { 
  return ( 
    <div id="incomeTable" className="text-left mx-auto flex" key={key}> 
      <p className="w-32 border p-1 capitalize">{key} :</p> 
      <p className="w-32 border p-1 text-green-500">{value}€</p> 
      <button onClick={(e) => handleDeleteIncome(e, key)}>
        <i className="fas fa-times text-red-400 border p-1"></i>
      </button> 
    </div> 
  ) 
})

这样修改后，点击按钮就能正确传递你想要的key值啦！

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