大家好,我正在努力解决 usecontext return undefine 问题,请帮忙 我尝试了堆栈上的每一个解决方案,但没有任何效果,请需要帮助
这是我的代码
监视列表上下文文件
import React, { createContext } from "react";
import Moviedata from "../utility/movieData";
export const WatchlistContext = createContext();
function WatchlistProvider({ children }) {
const [Watch, setWatch] = React.useState(Moviedata);
return (
<WatchlistContext.Provider value={{ Watch }}>
{children}
</WatchlistContext.Provider>
);
}
export default WatchlistProvider;
index.js 文件
import MoviesProvider from "./context/Movies";
import WatchlistProvider from "./context/Watchlists";
ReactDOM.render(
<MoviesProvider>
<WatchlistProvider>
<ThemeProvider theme={theme}>
<App />
</ThemeProvider>
</WatchlistProvider>
</MoviesProvider>,
document.getElementById("root"));
Watchlist.js 文件
import { WatchlistContext } from "../context/Watchlists";
function Watchlist() {
const classes = useStyle();
const { Watch } = useContext(WatchlistContext);
console.log(Watch);
return (
<div>
<HomeNavbar
search={
<div className={classes.search}>
<div className={classes.searchIcon}>
<SearchIcon />
</div>
<InputBase
placeholder="Search…"
classes={{
root: classes.inputRoot,
input: classes.inputInput,
}}
inputProps={{ "aria-label": "search" }}
/>
</div>
}
/>
</div>
)}
export default Watchlist;
[][1][1]:https://i.stack.imgur.com/ZbDib.png
答案 0 :(得分:0)
在你的上下文文件中尝试在你创建它时给它一个初始值,我很确定应该可以解决问题。
答案 1 :(得分:0)
如果您没有这样做,您应该在 watchlist.js 文件中添加 import {useContext} form "react"
。