时间戳

首页 > 解决方案 > 所有索引在渲染后立即在控制台记录 - React

javascript - 所有索引在渲染后立即在控制台记录 - React

问题描述

我正在使用 map 函数在 React 中渲染一组图像。我的目标是使图像可点击，并在控制台中记录相应的索引（稍后我将使用它来设置状态）。使用下面的代码，所有索引都会在渲染后立即记录。我是 React 的新手，想不出解决方案，也找不到解决方案。

import React from 'react';
import './PlaylistGridStyle.css'


const PlaylistGrid = ( props ) => {

    return (
        <div>
            <div>
                <h1 className='playlistGridHeader'>
                    {props.user.display_name}'s playlists
                </h1>
                <ul className='list'>
                    {props.playlistData.items.map((playlist, index) => {
                        return(
                        <li key={playlist.name} className='item'> 
                            <img src={playlist.images[0].url} alt='Playlist cover' height='250px' width='250px' onClick={console.log(index)}/>
                            <div className='description'>{playlist.name}</div>
                        </li>
                        )
                    })}
                </ul>
            </div>
        </div>
    )
}

export default PlaylistGrid;

标签： javascriptreactjs

解决方案

这样做会更好，因为 onClick 应该是函数。在您的情况下， onClickconsole.log在渲染组件时收到了立即调用的值。

<img src={playlist.images[0].url} alt='Playlist cover' height='250px' width='250px' onClick={() => console.log(index)}/>

如果您需要处理函数中的点击，只需执行以下操作：

const PlaylistGrid = ( props ) => {
    const handleClick = (index) => {
        console.log(index);
    };

    return (
        <div>
            <div>
                <h1 className='playlistGridHeader'>
                    {props.user.display_name}'s playlists
                </h1>
                <ul className='list'>
                    {props.playlistData.items.map((playlist, index) => {
                        return(
                        <li key={playlist.name} className='item'> 
                            <img src={playlist.images[0].url} alt='Playlist cover' height='250px' width='250px' onClick={() =>handleClick(index)}/>
                            <div className='description'>{playlist.name}</div>
                        </li>
                        )
                    })}
                </ul>
            </div>
        </div>
    )
}

export default PlaylistGrid;

推荐阅读