React中如何遍历列表元素？点击图标无法获取key值求助

你的代码里出现undefined的核心原因是点击事件的参数名和map循环的元素变量名重名了：map里的变量叫e，onClick回调的参数也叫e，导致回调里的e被覆盖成了React的事件对象，而非你数组里的元素，自然拿不到value或id。

解决方法： #

• 方法一：重命名回调参数
  把onClick的参数改成和map变量不同的名字，比如event，这样就能正常访问外层的数组元素：

  const Cards = ({arr}) => {
    return (
      <ul className='output'>
        {arr.map(e => {
          return <li key={e.id} className="card" >
            {e.value}
            <FaTimes color='red' style={{cursor: 'pointer'}} onClick={event => console.log(e.id)}/>
          </li>
        })}
      </ul>
    )
  }
  

• 方法二：修改map变量名（更清晰）
  把map里的e改成item这类语义化的名字，避免命名冲突：

  const Cards = ({arr}) => {
    return (
      <ul className='output'>
        {arr.map(item => {
          return <li key={item.id} className="card" >
            {item.value}
            <FaTimes color='red' style={{cursor: 'pointer'}} onClick={() => console.log(item.id)}/>
          </li>
        })}
      </ul>
    )
  }
  

• 方法三：抽离独立处理函数（适合复杂逻辑）
  如果后续要加更多操作，把点击逻辑抽成单独函数，可读性更强：

  const Cards = ({arr}) => {
    const handleClick = (itemId) => {
      console.log(itemId);
      // 这里可以添加删除元素等后续逻辑
    }
  
    return (
      <ul className='output'>
        {arr.map(item => {
          return <li key={item.id} className="card" >
            {item.value}
            <FaTimes color='red' style={{cursor: 'pointer'}} onClick={() => handleClick(item.id)}/>
          </li>
        })}
      </ul>
    )
  }
  

注意：React的key属性是给框架内部复用元素用的，你无法直接通过DOM元素或组件访问key，所以直接用数组元素自带的id作为标识即可。

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