如何在函数映射中获取ReactJS中元素的id？

如何在映射函数中获取列表元素的id

export default class PhotoSlider extends Component {
    handleSort(value) {
        console.log(value)
    }

    render() 
    {
        return photo.map((entry, index) => <Link to='#' onClick={() => this.handleSort(entry.id)}>... </Link>)
    }
}

控制台只打印最后一个元素的id

在cnsole中单击链接时

使用onClick={=>this.handleSortentry.id}在单击时不会调用函数，它会将函数返回的内容分配给单击事件

以下代码预配置了函数，以使用箭头函数发送条目id和单击事件参数：

export default class PhotoSlider extends Component {
    handleSort = value => event => {
        console.log(value)
    }

    render() 
    {
        return photo.map(entry => <Link to='#' onClick={this.handleSort(entry.id)}>... </Link>)
    }
}

另外，在使用map时，不要忘记为组件添加键：

photo.map(entry => <Link to='#' key={entry.id} onClick={this.handleSort(entry.id)}>... </Link>)

此外，在询问问题时，请尝试正确缩进代码，例如我在编辑问题时所做的那样

编辑：我想我明白了： 在React中，渲染函数应该发送单个HTML节点，这可能是只使用最后一个链接的原因

如果您使用的是最新版本的React，则可以将地图包装为一个片段：

export default class PhotoSlider extends Component {
    handleSort = value => event => {
        console.log(value)
    }

    render() 
    {
        return (
            <>
                {photo.map(entry => <Link to='#' onClick={this.handleSort(entry.id)}>... </Link>)}
            </>
        )
    }
}

否则，只需使用div或React.Fragment：

export default class PhotoSlider extends Component {
    handleSort = value => event => {
        console.log(value)
    }

    render() 
    {
        return (
            <div>
                {photo.map(entry => <Link to='#' onClick={this.handleSort(entry.id)}>... </Link>)}
            </div>
        )
    }
}

---

什么是印刷品？你确定每个条目都有一个id属性吗？只打印最后一个元素的id，每个条目都有一个id属性，因为它是来自db的数据，这真的很奇怪，你能不能控制台。在返回之前，将你的条目数组记录在渲染函数中，告诉我它显示了什么？将pic添加到QuestionOK，谢谢你的更新，我认为这应该解决它