在React上下文中，分派没有将数据保存在数据层中

Question

我正在学习一个教程，他们正在制作Spotify的克隆版。为此，我获得了用户访问令牌来访问所有用户数据。为了避免钻支柱，我使用React Context-api来保存和提取用户数据(令牌、用户信息、播放列表信息等)。在我的Sidebar.js中，我希望从数据层上下文中提取播放列表信息，并将其显示给用户。但是播放列表信息并没有显示在那里，在控制台日志记录之后，我得到了undefined。当然，我还在App.js中记录了播放列表信息，在那里我得到了我需要的所有信息，但不是在Sidebar.js中。我已经附上了我在这个链接中得到的屏幕截图-> 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的原因，一开始我以为箭头函数会自动返回一些东西，但我错了。由于我使用的是{}，所以必须在语句前面添加返回。我更新了Sidebar.js