为什么React自定义hook useQueueHandler中的状态变更无法被读取？

问题根源 #

你遇到的核心问题是React 自定义 Hook 的状态是实例隔离的：每调用一次 useQueueHandler，就会生成一套独立的 userQueue 状态、addSongToQueue、loadNextSong 方法，不同调用实例之间的状态完全不互通。
你提到实际场景中 addSongToQueue 是在其他组件调用的，如果你是在其他组件和 AudioPlayer 组件中分别调用了 useQueueHandler，那么两个组件拿到的是完全独立的队列，自然在 AudioPlayer 里调用 loadNextSong 读不到其他组件添加的歌曲。 #

解决方案 #

方案1：状态提升（适合组件层级较浅的场景） #

把 useQueueHandler 的调用放到所有需要用到队列逻辑的公共父组件中，再将状态和方法通过 props 透传给需要用到的子组件，保证所有组件用的是同一个 Hook 实例的状态。

方案2：用 Context 封装全局共享队列（适合多组件跨层级调用的场景） #

你可以把队列逻辑封装到 React Context 中，全局提供唯一的队列实例，所有组件调用时都从 Context 取状态和方法，就能保证状态共享：
首先创建队列 Context：

// context/QueueContext.js
import { createContext, useContext } from 'react';
import useQueueHandler from '../hooks/useQueueHandler.js';

const QueueContext = createContext();

export function QueueProvider({ children }) {
  const queueHandlers = useQueueHandler();
  return (
    <QueueContext.Provider value={queueHandlers}>
      {children}
    </QueueContext.Provider>
  );
}

export function useQueue() {
  return useContext(QueueContext);
}

然后在应用入口包裹 QueueProvider：

// App.js 或者入口文件
import { QueueProvider } from './context/QueueContext.js';

function App() {
  return (
    <QueueProvider>
      {/* 你的其他组件，包括 AudioPlayer 和调用 addSongToQueue 的组件 */}
    </QueueProvider>
  );
}

之后所有需要用到队列逻辑的组件，都统一用 useQueue 取方法即可：

// AudioPlayer.js 调整后
import { useQueue } from "../context/QueueContext.js";

const AudioPlayer = () => {
  const {userQueue, loadNextSong, addSongToQueue} = useQueue();

  return (
    <div>
      <div>
        <button onClick={() => addSongToQueue({songTitle : "Angeles"})}>添加歌曲</button>
      </div>
      <div>
        <button onClick={() => loadNextSong()}>切下一首</button>
      </div>
    </div>
  )
}

其他代码优化点 #

1. 你的 useState 命名不规范，newCurrentSong 应该改为 setCurrentSong，符合 React 状态更新函数的命名惯例。
2. 演示代码中的第一个 button 标签没有闭合，实际开发时需要注意补全。

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