我正在尝试在 vite 中使用 Context api 来创建待办事项网站，但不知何故它不起作用

Question

这是我的Usercontext.js

import React from "react";

const Usercontext = React.createContext();

export default Usercontext;

这是我的 Usercontextprovider.jsx

import React, {  useState } from "react";
import Usercontext from "./usercontext";

const Usercontextprovider = ({children})=>{
    let [user,Setuser] = useState(null);
    <Usercontext.Provider value={{user,Setuser}}>
        {children}
    </Usercontext.Provider>
}
export default Usercontextprovider;

这是我的 Addtodo.jsx

import { useEffect, useState ,useContext} from "react";
import Usercontext from "./context/usercontext";

export default function Addtodo(){
    let [options,setoptions] = useState([]);
    let id = 1;
    let {setuser} = useContext(Usercontext);
    return(
        <>
        <input type="text" placeholder="ADD TO DO" defaultValue={''} className="border rounded-l-lg w-64 h-6 text-black" id='todo'/>
        <button className="bg-orange-500 rounded-r-lg" onClick={()=>{
            let todo = document.querySelector("#todo").value;
                options.push({
                    'id':id,
                    'tick':false,
                    'edit':false,
                    'todo':{todo}
                });
                setuser({options});
                id++;
                document.querySelector('#todo').value = '';
        }}>ADD</button>
        </>
    )
}

这是我的app.jsx

import Addtodo from './Addtodo'
import Usercontextprovider from './context/usercontextprovider'
import List from './List'
function App() {
  return (
    <Usercontextprovider>
        <h1>Hello</h1>
        <Addtodo />
    </Usercontextprovider>
  )
}

导出默认应用程序；

我的网页现在是空的，根目录中没有元素， 我本来希望它有 Addtodo.jsx，但它是空的

Answer 1

据我所知，您没有在 UseContextProvider 中返回任何内容。您应该添加 return 语句：

import React, {  useState } from "react";
import Usercontext from "./usercontext";

const Usercontextprovider = ({children})=>{
    let [user,Setuser] = useState(null);
    return <Usercontext.Provider value={{user,Setuser}}>
        {children}
    </Usercontext.Provider>
}
export default Usercontextprovider;

希望这能解决问题