React.js使用.map()渲染JSX时获取元素id返回null的问题及解决

问题产生原因 #

• 核心错误是onClick事件的回调参数定义错误：你写的onClick={(i.id)=>this.getButtonId(i.id)}中，括号内的i.id被识别为回调函数的形参名，相当于你把默认传入的点击事件Event对象重命名为了i.id，实际传入getButtonId方法的是Event对象而非你预期的用户id。拼接后查找的id为div_[object Object]，页面不存在对应元素，因此返回null。
• 额外提示：React框架下不推荐直接使用document.getElementById这类原生DOM操作，优先使用React官方提供的ref体系获取DOM元素，更符合React的数据流和生命周期设计。

正确实现方式 #

方案1：修复回调参数，保留原有逻辑 #

你的id赋值写法id={'div_'+i.id}本身没有问题，只要this.state.users中每一项的id是唯一值，就能保证所有按钮的id不重复。只需修正onClick的回调写法即可：

// 方法定义无需修改
const getButtonId = (num) => {
   let click_detect = document.getElementById('div_' + num)
   console.log(click_detect)
}

// 渲染部分删除回调的形参声明即可
this.state.users.map(i => {
   return(
    <button id={'div_' + i.id} onClick={() => this.getButtonId(i.id)}>
      Click Me
    </button>
  )
})

方案2：更符合React规范的实现（无需依赖id查找DOM） #

如果你的最终目的是获取点击对应的按钮DOM元素，完全不需要通过id查找，直接从事件对象中就能获取目标元素：

// 直接从事件对象取当前点击的按钮DOM
const getButton = (e) => {
  console.log(e.currentTarget)
}

// 渲染逻辑更简洁，也不需要额外声明id
this.state.users.map(i => {
   return(
    <button onClick={this.getButton}>
      Click Me
    </button>
  )
})

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