React中Context状态更新后音频播放器无法播放歌曲？求排查

我开发了一款音乐播放器，想要实现点击歌曲图片时将歌曲添加到音频播放器组件的功能。使用createContext Hook全局管理状态传递数据，控制台显示songClicked值已更新为目标歌曲文件，但绑定音频源的currentSong设置后歌曲仍无法播放。

简化后的源码 #

Context.js #

import { createContext } from "react";

export const songContext = createContext({});

Music.js #

import DrakeOneDance from '../music/Drake_One_Dance.mp3'
import AdelleHello from '../music/Adele_Hello.mp3'
import JuiceWrldLucidDreams from '../music/Lucid_Dreams.mp3'
import KingsOfLeonPyro from '../music/Pyro.mp3'

<div className='music-container'>
    <SongGrid songs={songs} />
</div>

SongGrid.js #

import React from 'react';
import { useContext } from 'react';
import { songContext } from '../pages/Context'

function SongGrid({songs}) {
  const { songClicked, setSongClicked } = useContext(songContext)
  
   function getSongOne() {
    let songFile = songs.map(song => song.songFile)
    setSongClicked(songFile[0]) // 获取歌曲数组中的第一首
   }

  return (
    <div className="song-main-container">
        <img src={Rap} onClick={getSongOne} />
    </div>
  )
}

export default SongGrid

MusicPlayer.js #

import React, { useState, useEffect, useRef } from 'react'
import { songContext } from '../pages/Context'
import { useContext } from 'react';

function MusicPlayer({songs}) {
    const audioPlayer = useRef()
    const { songClicked, setSongClicked } = useContext(songContext)
    const [currentSong] = useState(songClicked); // 这里应该更新音频源？
    const [isPlaying, setisPlaying] = useState(false);

    function togglePlay() {
        if(!isPlaying) {
            audioPlayer.current.play()
        } else {
            audioPlayer.current.pause()
        }
        setisPlaying(isPlaying => !isPlaying)
    }

    return (
        <div className='music-player-container'>
            <audio src={currentSong} ref={audioPlayer} muted={mute} /> 
        </div>
    )
}

export default MusicPlayer

问题分析与解决 #

核心问题 #

1. currentSong状态无法同步更新：useState(songClicked)只会在组件首次渲染时初始化一次，后续context中的songClicked更新时，currentSong不会自动同步。
2. 音频源更新后未触发加载：即使直接绑定songClicked到audio的src，React更新DOM后，音频元素不会自动加载新资源，需要手动触发。
3. 未定义mute状态：原代码中muted={mute}但未声明mute状态，会导致控制台报错，影响音频播放。

修改后的代码 #

MusicPlayer.js 修复版

import React, { useEffect, useRef, useState } from 'react'
import { songContext } from '../pages/Context'
import { useContext } from 'react';

function MusicPlayer({songs}) {
    const audioPlayer = useRef()
    const { songClicked } = useContext(songContext)
    const [isPlaying, setIsPlaying] = useState(false);
    // 新增mute状态，修复未定义问题
    const [mute, setMute] = useState(false);

    // 当songClicked变化时，更新音频源并重置播放状态
    useEffect(() => {
        if (audioPlayer.current && songClicked) {
            // 更新音频源
            audioPlayer.current.src = songClicked;
            // 重置播放状态：暂停、回到开头
            audioPlayer.current.pause();
            audioPlayer.current.currentTime = 0;
            setIsPlaying(false);
            // 自动加载新音频
            audioPlayer.current.load();
        }
    }, [songClicked]);

    function togglePlay() {
        if (!isPlaying) {
            // 捕获播放失败的错误，方便排查
            audioPlayer.current.play().catch(err => {
                console.error('播放失败:', err);
            });
        } else {
            audioPlayer.current.pause()
        }
        setIsPlaying(prev => !prev)
    }

    return (
        <div className='music-player-container'>
            <audio ref={audioPlayer} muted={mute} /> 
            {/* 增加播放按钮，方便测试交互 */}
            <button onClick={togglePlay}>{isPlaying ? '暂停' : '播放'}</button>
        </div>
    )
}

export default MusicPlayer

确保Context Provider正确配置（Music.js补充）

import React, { useState } from 'react';
import { songContext } from '../pages/Context';
import SongGrid from './SongGrid';
import MusicPlayer from './MusicPlayer';
import DrakeOneDance from '../music/Drake_One_Dance.mp3'
import AdelleHello from '../music/Adele_Hello.mp3'
import JuiceWrldLucidDreams from '../music/Lucid_Dreams.mp3'
import KingsOfLeonPyro from '../music/Pyro.mp3'

// 定义歌曲数组
const songs = [
    { songFile: DrakeOneDance },
    { songFile: AdelleHello },
    { songFile: JuiceWrldLucidDreams },
    { songFile: KingsOfLeonPyro }
];

function Music() {
    // 在Provider上层声明状态，传递给子组件
    const [songClicked, setSongClicked] = useState(null);

    return (
        <songContext.Provider value={{ songClicked, setSongClicked }}>
            <div className='music-container'>
                <SongGrid songs={songs} />
                <MusicPlayer songs={songs} />
            </div>
        </songContext.Provider>
    )
}

export default Music;

验证修改后 #

• 点击歌曲图片时，songClicked会更新，useEffect监听变化并更新音频源
• 音频源更新后会重置播放状态，避免之前的播放状态干扰
• 修复了mute未定义的报错问题

内容的提问来源于stack exchange，提问作者Gavin-walsh