React音乐播放器点击播放按钮报错：Cannot read property 'play' of null 求助

这个错误的核心原因很清晰：你在组件初始化时就尝试用document.getElementById('player')获取DOM元素，但此时组件的JSX还没有渲染挂载到页面上，所以player变量的值是null，当你点击Play按钮调用player.play()时自然就触发了报错。

在React开发中，官方更推荐使用useRef钩子来安全地获取DOM元素，而不是直接操作DOM。下面是修复后的完整代码：

import React, { useState, useRef } from 'react';
import ReactDOM from 'react-dom';

const App = () => {
  // 使用useRef创建引用，用来关联audio元素
  const playerRef = useRef(null);
  const [musicIndex, setMusicIndex] = useState(0);

  const musicArray = [
    { title: 'koe no katachi', link: 'aiko- 恋をしたのはmusic video.mp3' },
    { title: 'stay alive', link: 'ReZero ED Ending 2 FullEmilia (Rie Takahashi) - Stay AliveENG Sub.mp3' },
    { title: 'Tenshi ni fureta', link: '[K-ON AMV] 天使にふれたよ.mp3' }
  ];

  // 封装播放、暂停函数，先判断ref是否存在避免报错
  const handlePlay = () => {
    if (playerRef.current) {
      playerRef.current.play();
    }
  };

  const handlePause = () => {
    if (playerRef.current) {
      playerRef.current.pause();
    }
  };

  return (
    <div className="spotify-clone">
      {/* 将ref绑定到audio元素，React会在DOM挂载后自动赋值 */}
      <audio 
        ref={playerRef} 
        className='player' 
        src={`Songs/${musicArray[musicIndex].link}`} 
        controls
      ></audio>
      <h3>{musicArray[musicIndex].title}</h3> {/* 这里改成显示title，用户体验更友好 */}
      <div className='button'>
        {/* 优化上下曲逻辑，避免数组越界 */}
        <button onClick={() => setMusicIndex(prev => Math.min(prev + 1, musicArray.length - 1))}>Next</button>
        <button onClick={() => setMusicIndex(prev => Math.max(prev - 1, 0))}>Prev</button>
        <button onClick={handlePlay}>Play</button>
        <button onClick={handlePause}>Pause</button>
      </div>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('music-player'));

关键修复与优化说明： #

• 用useRef替代直接DOM查询：通过ref={playerRef}将引用绑定到<audio>元素，React会在DOM完成挂载后自动把元素实例赋值给playerRef.current，保证获取到的元素不为空。
• 增加空值判断：在handlePlay和handlePause中先检查playerRef.current是否存在，避免组件卸载等边界场景下的潜在报错。
• 优化上下曲逻辑：给Next和Prev按钮加上边界判断，防止musicIndex超出数组范围导致的报错。
• 用户体验优化：把原来显示音频文件名改成显示title，界面更直观。

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