[英]React useContext returns undefined
我正在尝试使用 React Context 来管理我的项目的状态,但是这次我似乎无法让它适用于我的 CRA 代码库,而我在其他项目上也有成功的尝试。 useContext
返回 undefined 所以我无法访问上下文中的值,但我已经仔细检查了我的 Provider 是否在我的应用程序根级别。 感谢任何帮助。
这是我简化的 App 组件:
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 };
你有一个小错字。
而不是values
正确的是value
没有s
。
<PlayerContext.Provider value={values}>
如果你得到undefined
并且不是因为打字错误,你可能忘记用Provider
“包装”一个组件,并且undefined
值来自React.createContext()
的第一个参数(这是 undefined 是你没有通过任何东西)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.