React中如何通过onClick函数从映射列表返回key值

问题核心 #

在React映射渲染的列表组件中，点击子组件时无法获取选中项的key值，控制台打印undefined，但点击事件能正常触发，需要拿到该key值用于后续请求。

错误原因 #

React中的key是特殊保留属性，仅用于React内部识别列表项唯一性、优化渲染性能，不会作为常规props传递给子组件。因此子组件中通过props.key无法获取到父组件传入的key值。

解决步骤 #

1. 父组件新增自定义属性：渲染子组件时，除了key外，额外传递一个自定义属性（比如itemKey）携带标识值
2. 子组件接收并使用自定义属性：在子组件中通过自定义属性名（而非key）获取标识值，在点击事件中传递该值

修正后的代码 #

父组件（PreGameMenu.js） #

import React from 'react'
import "./PreGameMenu.css"
import PreGameCard from './PreGameCard';

const PreGameMenu = (props) => {
    const PreGameItems = props.data;

    return (
        <div className='Menu'>
            {PreGameItems.map(item => <PreGameCard 
                key={item.key} 
                itemKey={item.key} // 新增自定义属性传递标识值
                Name={item.Name} 
                Date={item.Date}
                Asset={item.Asset}
                Ticker={item.Ticker}
            ></PreGameCard>)}
        </div>
    );
};

export default PreGameMenu;

子组件（PreGameCard.js） #

const PreGameCard = (props) => {
    // 修复原代码中未定义的date变量
    const date = new Date(props.Date);
    const day = date.getDate();
    const monthString = date.toLocaleString('en-US', { month: 'long' });
    const year = date.getFullYear();

    const handleClick = (event, itemKey) => { 
        console.log(itemKey); // 现在能正确输出选中项的标识值
        console.log(event);
    };

    return (
        <li className='menulist' onClick={(e) => handleClick(e, props.itemKey)}> 
            <div className='CardContainer'>
                <div className='CardHeader'>{props.Name}</div>
                <div className='Day'>{day}</div>
                <div className='Month'>{monthString}</div>
                <div className='Year'>{year}</div>
                <div className='Ticker'>{props.Ticker}</div> 
                <div className='Asset'>{props.Asset}</div>        
            </div>         
        </li>
    );
};

export default PreGameCard;

额外说明 #

• 自定义属性名可根据业务需求命名（比如id、gameId等），只要不是React保留字即可
• 原代码中存在date变量未定义的小问题，已同步修复，避免运行时报错

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