React Context API中Dispatch未将数据存入数据层 侧栏无法获取播放列表

问题原因与修复方案 #

1. 核心错误：Reducer 字段名不匹配 #

你在 App.js 派发 SET_PLAYLIST 动作时，传入的 payload 字段名为 playlists，但 Reducer 对应分支中错误读取了不存在的 action.playlist 字段，导致全局状态中 playlists 被赋值为 undefined。

修改方法：

打开 Reducer.js，修改 SET_PLAYLIST 分支的取值字段：

case "SET_PLAYLIST":
  return {
    ...state,
    playlists: action.playlists, // 把 action.playlist 改成 action.playlists
  };

2. 潜在问题：token 解析函数未调用 #

你当前获取 hash 的代码没有执行 getTokenFromUrl 函数，只是把函数本身赋值给了 hash 变量，后续无法正确拿到 access_token。

修改方法：

打开 App.js，修改 useEffect 中的对应代码：

const hash = getTokenFromUrl(); // 加括号执行函数

修改完成后播放列表即可正常渲染。

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