Dispatch 未在 React Context Api 的数据层中保存数据答案

【问题标题】：Dispatch is not saving data in datalayer in React Context ApiDispatch 未在 React Context Api 的数据层中保存数据
【发布时间】：2021-09-16 19:18:41
【问题描述】：

我正在关注他们正在克隆 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;
  }
};

【问题讨论】：

你的reducer有错别字，应该是playlists: action.playlists
@BankBuilder 但在我的App.js 中，我从承诺中得到playlist，不是吗？为什么播放列表？同样在 Sidebar.js 我正在获取播放列表信息，但映射不起作用
在我看来，其他一切都是正确的，但您的调度看起来像这样：dispatch({type: "SET_PLAYLIST", playlists: playlist});。请注意，您的操作中的键名为playlists（如action.playlists），但在您的reducer 中您将其引用为action.playlist。
@BankBuilder 是的，我明白了，但映射仍然不起作用。我在控制台记录了每个项目，但没有在 SidebarOption 组件中调用它们
@BankBuilder 不，现在解决了...我所要做的就是在<SidebarOption title={list.name} />; 之前添加return .. 因为我使用花括号，所以我忘记添加return , 起初我以为箭头函数会自动返回一些东西，但我错了。由于我使用的是{}，所以我必须在语句前面添加return。我已经更新了Sidebar.js

标签： javascript reactjs react-context

【解决方案1】：

我所要做的就是在<SidebarOption title={list.name} />; 之前添加return .. 因为我使用花括号，所以我忘记添加return，起初我以为箭头函数会自动返回一些东西，但我错了。当我使用{} 时，我必须在语句前面添加return。我已经更新了Sidebar.js

【讨论】：