React单视频播放控制问题：点击按钮后状态未正确更新求助

一、当前问题修复 #

你遇到的state变为undefined的原因是playVideo函数里的setAllVideos回调没有返回新数组。map方法会生成新数组，但你未将这个结果return出去，导致setAllVideos接收到undefined，直接覆盖了原state。

修复后的playVideo函数：

function playVideo(id) {
  setAllVideos((oldVideos) => {
    // 必须return map生成的新数组
    return oldVideos.map((video) => {
      return video.id === id
        ? { ...video, playing: !video.playing }
        : { ...video, playing: false };
    });
  });
}

另外，渲染视频列表时建议给每个元素添加唯一key（用item.id），避免React渲染警告：

const videos = allVideos.map((item) => {
  return (
    <React.Fragment key={item.id}>
      <Playlist url={item.url} id={item.id} playing={item.playing} />
      <button onClick={() => playVideo(item.id)}>Play</button>
    </React.Fragment>
  );
});

二、更优实现方案 #

当前方案为每个视频维护playing状态，其实可以简化为只存储当前播放的视频ID，状态更轻量化，逻辑也更清晰：

1. 主组件修改 #

// 仅存储当前播放的视频id，初始为null表示无视频播放
const [currentPlayingId, setCurrentPlayingId] = useState(null);

// 直接用原始数据渲染，无需提前生成带playing字段的数组
const videos = data.map((item) => {
  return (
    <React.Fragment key={item.id}>
      <Playlist 
        url={item.url} 
        id={item.id} 
        playing={item.id === currentPlayingId} 
      />
      <button onClick={() => toggleVideo(item.id)}>
        {item.id === currentPlayingId ? 'Pause' : 'Play'}
      </button>
    </React.Fragment>
  );
});

function toggleVideo(id) {
  // 点击当前播放的视频则暂停，否则切换到该视频播放
  setCurrentPlayingId(prevId => prevId === id ? null : id);
}

2. Playlist组件无需修改 #

保持原代码即可，playing属性由父组件通过item.id === currentPlayingId计算传入。

这种方案的优势：

• 状态更简洁，无需维护每个视频的playing字段
• 切换逻辑更高效，无需遍历整个数组修改状态
• 扩展性更强（比如添加全局暂停按钮，只需将currentPlayingId设为null）

内容的提问来源于stack exchange，提问作者program.exe