useContext return 取消定义

Question

大家好，我正在为 usecontext 而苦苦挣扎 return 未定义问题，请帮忙我尝试了堆栈上的每一个解决方案，但没有任何效果请需要帮助

这是我的代码

监视列表上下文文件

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

Answer 1

尝试在你的上下文文件中创建它时给上下文一个初始值，我很确定应该可以解决问题。

Answer 2

如果没有，您应该在 watchlist.js 文件中添加 import {useContext} form "react"。

useContext return 取消定义

useContext return undefine

jsx

reactjs

react-context