React音乐列表点击播放时函数无法识别item的解决办法是什么？

你只需要通过箭头函数在绑定点击事件时把当前遍历到的item作为参数传入处理函数即可，具体修改点如下：

1. 先给map遍历的每个列表项加唯一key属性，这是React渲染列表的强制要求，避免后续状态出现异常。
2. 在组件内部定义播放控制函数，接收音乐条目作为入参。
3. 给播放图标的onClick绑定箭头函数，把当前item传入处理函数。

完整修改后的代码示例：

import { useState } from 'react';

const Musics = [
  {
    id: 1, // 建议给每个音乐加唯一id当key，比用名称更稳妥
    name: "это ли счастье",
    img: этолисчастьеImg,
    singer: "Rauf & Faik",
    url: этолисчастьеMusic
  },
  // 其余音乐条目...
];

function MusicList() {
  // 可选：加状态记录当前播放的音乐id，实现播放/暂停切换
  const [playingId, setPlayingId] = useState(null);
  // 可选：存储当前播放的音频实例，避免多个同时播放
  const [currentAudio, setCurrentAudio] = useState(null);

  const handlePlayControl = (musicItem) => {
    // 如果点击的是正在播放的音乐，执行暂停
    if (playingId === musicItem.id) {
      currentAudio.pause();
      setPlayingId(null);
      return;
    }
    // 先暂停之前播放的音频
    if (currentAudio) {
      currentAudio.pause();
    }
    // 播放新点击的音频
    const newAudio = new Audio(musicItem.url);
    newAudio.play();
    setCurrentAudio(newAudio);
    setPlayingId(musicItem.id);
  }

  return (
    <>
      <Box className="list-box">
        {Musics.map((item) =>
          <Grid container className="box-music" key={item.id}>
            <Grid item lg={3}>
              <img src={item.img} width="80px" height="80px" className="img-box" alt={item.name} />
            </Grid>
            <Grid item lg={7} className="text">
              <Typography>
                <h5 className="name"> {item.name} </h5>
              </Typography>
              <p style={{ color: "#6f009b" }}>{item.singer}</p>
            </Grid>
            <Grid item lg={1}>
              <i 
                className={`fa ${playingId === item.id ? 'fa-pause' : 'fa-play'} fa-1x pley`} 
                aria-hidden="true" 
                onClick={() => handlePlayControl(item)}
              ></i>
            </Grid>
          </Grid>
        )}
      </Box>
    </>
  )
}

如果你不需要暂停切换功能，只保留基础播放能力，直接去掉playingId相关逻辑即可，核心就是onClick={() => 处理函数(item)}的写法，箭头函数会捕获当前遍历作用域的item对象，不会出现识别不到的问题。

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