reactjs - React useContext 返回未定义

Question

我正在尝试使用 React Context 来管理我的项目的状态，但这次我似乎无法让它适用于我的 CRA 代码库，而我在其他项目上进行了成功的尝试。 useContext 返回未定义，因此我无法访问上下文中的值，但我已仔细检查我的提供程序是否位于我的应用程序根级别。感谢任何帮助。

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

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，而是不带 s 的 value。

<PlayerContext.Provider value={values}>

编辑:

如果您得到 undefined 并且不是因为拼写错误，您可能忘记使用 Provider 和 undefined< 来“包装”组件 值来自 React.createContext() 的第一个参数(如果您不传递任何内容，则该参数是未定义的)