当我单击play按钮时，它会显示一个错误：“无法读取属性'play‘of null’。”

Question

当我单击play按钮时，它会显示一个错误：

‘无法读取属性’播放‘的空’

这是我的代码：

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

const App = () => {

      const player = document.getElementById('player')
      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'
        }
      ]
      
      return (
        <div className="spotify-clone">

          <audio id='player' className='player' src={`Songs/${musicArray[musicIndex].link}`} controls></audio>
          <h3>{musicArray[musicIndex].link}</h3>

          <div className='button'>
          <button onClick={() => setMusicIndex(musicIndex + 1)}>Next</button>
          <button onClick={() => setMusicIndex(musicIndex - 1)}>Prev</button>
          <button onClick={() => player.play()}>Play</button>
          <button onClick={() => player.pause()}>Pause</button>
          </div>
          
        </div>
      );
    }

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

Answer 1

你需要使用参考文献

import React, {useState,useRef} from 'react';
    export const App = () => {
      const playerRef = useRef<HTMLAudioElement>(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'
        }
      ]
      
      return (
        <div className="spotify-clone">
    
          <audio id='player' ref={playerRef} 
          className='player'
           src={`Songs/${musicArray[musicIndex].link}`} controls>
    
           </audio>
          <h3>{musicArray[musicIndex].link}</h3>
    
          <div className='button'>
          <button onClick={() => setMusicIndex(musicIndex + 1)}>Next</button>
          <button onClick={() => setMusicIndex(musicIndex - 1)}>Prev</button>
          <button onClick={() => playerRef?.current?.play()}>Play</button>
          <button onClick={() => playerRef?.current?.pause()}>Pause</button>
          </div>
          
        </div>
      );
    }

Answer 2

您可以尝试将播放机初始化为内联：

<button onClick={() => document.getElementById('player').play()}>Play</button>

我不知道这是否有帮助

Answer 3

您不应该在这里使用document.getElementById，因为此时还没有创建DOM。因此，与其这样做，不如用useState：const [player, setPlayerValue] = useState('');声明一个新变量

然后在useEffect方法中用document.getElementById('player')设置player变量的值。