React嵌套组件更新父元素问题：AudioPlayer未随CurrentSong变更

我希望每当CurrentSong的值变更时，更新AudioPlayer组件中的音频，实现每次播放新歌曲时切换音频。在Song.js中，我通过以下代码更新上下文：

const phoneContextValue = useContext(PhoneContext); 
phoneContextValue.SetCurrentSong(props.flink);

其中props.flink为音频链接，但调用Song.js时，AudioPlayer组件并未同步更新音频。

相关代码 #

AudioPlayer.js #

import React, { useContext, useEffect, useState } from 'react';
import { Outlet } from 'react-router-dom';
import PhoneContext from '../../../others/PhoneContext';

const AudioPlayer = () => {
  const phoneContextValue = useContext(PhoneContext);
  const [audio, setAudio] = useState(phoneContextValue.CurrentSong);

  useEffect(() => {
    setAudio(phoneContextValue.CurrentSong);
  }, [phoneContextValue.CurrentSong]);

  return (
    <>
      <audio className='audio-song' controls src={audio} alt='Audio Player'>
        Your browser does not support the audio element.
      </audio>
      <Outlet />
    </>
  );
};

export default AudioPlayer;

我尝试用useEffect监听CurrentSong的变更，但AudioPlayer没有随之更新。

RouterPage.js #

const RouterPage = () => {
  const [phone, setPhone] = useState('');
  const [CurrentSong,SetCurrentSong]=useState('');
  const phoneContextValue = {
    phone,
    setPhone,
    CurrentSong,
    SetCurrentSong,
  };
  
  return (
    <PhoneContext.Provider value={phoneContextValue}>
      <Routes>
        <Route path="/" element={<Login />} />
        <Route path="/home_page" element={<AudioPlayer />}>
          <Route path="/home_page" element={<MainFooter />} >
            <Route index element={<MainPageHome />} />
            <Route path="library" element={<MainPageLibrary />} />
          </Route>
          <Route path="song/:value/:name" element={<Song/>} />
        </Route>
        <Route path="*" element={<NotFound />} />
      </Routes>
    </PhoneContext.Provider>
  );
};
export default RouterPage;

解决方案 #

1. 移除本地state，直接使用上下文值 #

你在AudioPlayer里维护的audio本地state完全是多余的，直接用上下文的CurrentSong就能实现同步更新，省去useEffect的同步步骤：

import React, { useContext } from 'react';
import { Outlet } from 'react-router-dom';
import PhoneContext from '../../../others/PhoneContext';

const AudioPlayer = () => {
  const { CurrentSong } = useContext(PhoneContext);

  return (
    <>
      <audio className='audio-song' controls src={CurrentSong} alt='Audio Player'>
        Your browser does not support the audio element.
      </audio>
      <Outlet />
    </>
  );
};

export default AudioPlayer;

2. 优化上下文值的引用稳定性（可选） #

每次RouterPage渲染时，你都会创建新的phoneContextValue对象，导致所有消费上下文的组件强制重渲染。用useMemo缓存这个对象，只有当依赖的状态变化时才更新：

import React, { useState, useMemo } from 'react';
// 其他导入不变

const RouterPage = () => {
  const [phone, setPhone] = useState('');
  const [CurrentSong, SetCurrentSong] = useState('');
  
  const phoneContextValue = useMemo(() => ({
    phone,
    setPhone,
    CurrentSong,
    SetCurrentSong,
  }), [phone, CurrentSong]);

  return (
    <PhoneContext.Provider value={phoneContextValue}>
      {/* 路由代码保持不变 */}
    </PhoneContext.Provider>
  );
};
export default RouterPage;

3. 解决音频元素不刷新的问题 #

部分浏览器在修改audio的src属性后不会自动加载新音频，给audio元素添加key属性，当CurrentSong变化时，让React重新渲染整个audio组件：

<audio 
  className='audio-song' 
  controls 
  src={CurrentSong} 
  alt='Audio Player'
  key={CurrentSong}
>
  Your browser does not support the audio element.
</audio>

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