REACT USECONTEXT返回未定义

Question

我正在尝试使用React上下文来管理项目的状态，但是这次我似乎无法为我的CRA代码库工作，而我成功尝试了其他项目。useContext返回未定义的返回，因此我无法访问上下文中的值，但是我仔细检查了我的提供商是否处于App root Level。感谢任何帮助。

这是我简化的应用程序组件：

import React, { useContext } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import './App.css';
import { PlayerContextProvider, PlayerContext } from 'contexts/PlayerContext';
const App = () => (
  <PlayerContextProvider>
    <Test />
    <Router>
      <Switch>
        <Route path="/" exact component={Home} />
      </Switch>
    </Router>
  </PlayerContextProvider>
);
const Test = () => {
  const values = useContext(PlayerContext);
  console.log('test values', values); // returns undefined!
  return <div>Hello World</div>;
};
export default App;

这是我的上下文：

import React, { useState, createContext } from 'react';
const PlayerContext = createContext();
const PlayerContextProvider = ({ children }) => {
  const [players, setPlayers] = useState(['test']);
  const addPlayer = ({ name }) => {
    setPlayers([...players, { name }]);
  };
  const values = { players, addPlayer };
  console.log('context values', players); // shows ['test'] here
  return (
    <PlayerContext.Provider values={values}>
      <>
        {players}
        {children}
      </>
    </PlayerContext.Provider>
  );
};
export { PlayerContextProvider, PlayerContext };

Answer 1

您有一个小错字。

而不是values，正确的是value，没有s。

<PlayerContext.Provider value={values}>

编辑：

如果您要获得undefined，并且不是因为错字，那么您可能会忘记"包装"。具有Provider和undefined值的组件来自React.createContext()的第一个参数(不确定的是您没有传递任何内容(