Javascript 类型错误：无法读取react js中未定义的属性

我正在尝试使用钩子，但是，我无法找出出现的问题。我想在useEffect中设置令牌值，但我无法定义它

import React, { useEffect } from "react";
import "./App.css";
import Login from "./Login";
import { getTokenFromUrl } from "./spotify";
import SpotifyWebApi from "spotify-web-api-js";
import Player from "./Player";
import { useDataLayerValue } from "./DataLayer";

const spotify = new SpotifyWebApi();

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

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

    if (_token) {
      dispatch({
        type: "SET_TOKEN",
        token: _token,
      });
      spotify.setAccessToken(_token);
      spotify.getMe().then((user) => {
        dispatch({
          type: "SET_USER",
          user: user,
        });
      });
    }

    console.log(token);
  }, [dispatch, token]);

  return <div className="App">{token ? <Player /> : <Login />}</div>;
}

export default App;

从“React”导入React；
从“react dom”导入react dom；
导入“/index.css”；
从“/App”导入应用程序；
将*作为serviceWorker从“/serviceWorker”导入；
从“/DataLayer”导入{DataLayer}；
从“/reducer”导入reducer，{initialState}；
ReactDOM.render(
,
document.getElementById（“根”）
);

它引发以下错误：TypeError:无法读取未定义的属性“token”。

---

我不明白为什么它说“未定义”。任何人都可以帮我做这件事。

问题是似乎没有呈现

数据层

，因此

数据层上下文

保持

未定义

，然后

使用数据层价值（）

返回

未定义

---

长话短说：您需要将

应用程序

组件包装在

数据层中

和/或更改

导出const DataLayerContext=createContext（）

也许错误来自

const[{token}，dispatch]=useDataLayerValue（）。您正在尝试访问
令牌
，但第一个值是
未定义的
？是的，错误来自于此。^您应该尝试
const val=useDataLayerValue（）
，然后打印
val
，以查看实际返回的内容，并查看您的解构是否有意义。它返回的是数组吗？是的，它返回的是应用程序组件中的数组，但我仍然无法找到它
import React, { createContext, useContext, useReducer } from "react";

export const DataLayerContext = createContext();

export const DataLayer = ({ reducer, inititalState, children }) => (
  <DataLayerContext.Provider value={useReducer(reducer, inititalState)}>
    {children}
  </DataLayerContext.Provider>
);

export const useDataLayerValue = () => useContext(DataLayerContext);

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

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

export default reducer;


import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import { DataLayer } from "./DataLayer";
import reducer, { initialState } from "./reducer";

ReactDOM.render(
  <React.StrictMode>
    <DataLayer initialState={initialState} reducer={reducer}>
      <App />
    </DataLayer>
  </React.StrictMode>,
  document.getElementById("root")
);