Question

我正在尝试使用挂钩，但是我无法弄清出现的问题。我想在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;

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")
);

它引发以下错误：TypeError：无法读取未定义的属性“令牌”。我无法理解为什么它说不确定。谁能帮我做到这一点。

Answer 1

问题在于似乎没有渲染DataLayer，因此DataLayerContext保留了undefined，然后useDataLayerValue()返回了undefined。

长话短说：您需要将App组件包装在DataLayer中和/或更改export const DataLayerContext = createContext(<Default value with a token>)

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

1 个答案: