Dispatch 没有在 React Context 的数据层中保存数据 Api

Question

我正在学习他们制作 Spotify 克隆的教程。为此，我获得了用户访问令牌来访问所有用户数据。为了避免钻探，我使用 React Context-api 来保存和提取用户数据（令牌、用户信息、播放列表信息等）。在我的 Sidebar.js 中，我想从数据层上下文中提取播放列表信息并将其显示给用户。但是播放列表信息没有显示在那里，在控制台记录之后，我得到了 undefined。可以肯定的是，我还控制台在 App.js 中记录了播放列表信息，在那里我获得了我需要的所有信息，但在 Sidebar.js 中没有。我附上了我在 link --> https://ibb.co/PGj4XcT 中得到的截图，任何帮助将不胜感激。

Sidebar.js

function SideBar() {
  const [{ playlists }, dispatch] = UseDataLayerValue();
  console.log("user playlist from sidebar.js", playlists);

  return (
    <div className="sidebar">
      <img
        className="sidebar__logo"
        src="https://getheavy.com/wp-content/uploads/2019/12/spotify2019-830x350.jpg"
        alt="spotify-logo"
      />
      <SidebarOption Icon={HomeIcon} title="Home" />
      <SidebarOption Icon={SearchIcon} title="Search" />
      <SidebarOption Icon={LibraryMusicIcon} title="Your Library" />
      <br />
      <strong className="sidebar__title">PLAYLISTS</strong>
      <hr />

      {playlists?.items?.map((list) => {
        return <SidebarOption title={list.name} />;
      })}
    </div>
  );
}

App.js

function App() {
  const [{ token }, dispatch] = UseDataLayerValue();

  useEffect(() => {
    const hash = getTokenFromUrl;
    window.location.hash = "";
    const _token = hash.access_token;

    if (_token) {
      dispatch({
        type: "SET_TOKEN",
        token: _token,
      });
      // setToken(_token);

      spotify.setAccessToken(_token);

      spotify.getMe().then((user) => {
        dispatch({
          type: "SET_USER",
          user: user,
        });
      });

      spotify.getUserPlaylists().then((playlist) => {
        console.log("user playlist from app.js", playlist);
        dispatch({
          type: "SET_PLAYLIST",
          playlists: playlist,
        });
      });
    }
  }, [dispatch]);

  //console.log(user);
  //console.log(token);
  return (
    <div className="app">
      {token ? <Player spotify={spotify} /> : <Login />}
    </div>
  );
}

Reducer.js

export const initialState = {
  user: null,
  playlists: [],
  playing: false,
  item: null,
  token: null,
};

export const reducer = (state, action) => {
  switch (action.type) {
    case "SET_USER":
      return {
        ...state,
        user: action.user,
      };
    case "SET_TOKEN":
      return {
        ...state,
        token: action.token,
      };
    case "SET_PLAYLIST":
      return {
        ...state,
        playlists: action.playlist,
      };
    default:
      return state;
  }
};

Answer 1

我所要做的就是在 <SidebarOption title={list.name} />; 之前添加 return .. 因为我使用的是花括号，所以我忘记添加 return，起初我以为是箭头自动运行 returns 东西，但我错了。因为我使用 {} 所以我不得不在语句前面添加 return 。我更新了 Sidebar.js

Dispatch 没有在 React Context 的数据层中保存数据 Api

Dispatch is not saving data in datalayer in React Context Api

javascript

reactjs

react-context