我尝试过多种方法。看了上面很多解决方案，还是没能解决这个问题。任何人都可以帮助我在我的项目中使用上下文吗？

SearchContext.jsx

import { createContext } from 'react';

const SearchContext = createContext();

export default SearchContext;

Search.jsx

import * as React from 'react';
import { useState, useContext } from 'react';
import Paper from '@mui/material/Paper';
import AccountCircleIcon from '@mui/icons-material/AccountCircle';
import SearchIcon from '@mui/icons-material/Search';
import { Box, IconButton, InputBase } from '@mui/material';
import SearchContext from '../Context/SearchContext';

export default function Search() {
    const [searchQuery, setSearchQuery] = useState('');
    const handleSubmit = (event) => {
        event.preventDefault();
    };

    const handleInputChange = (event) => {
        setSearchQuery(event.target.value);
    };
    return (
        
            
                
                    
                        
                    
                    
                    
                        
                    
                
            
        
    );
}

我就是这么用的。这是对的吗 ？ 我后来在这里用过它

import React, { useContext, useEffect, useState } from 'react';
import { ApiService } from '../../API/ApiService';
import SearchContext from '../../Context/SearchContext';


function NumberOfContestParticipated({ handle }) {
    const [contestCount, setContestCount] = useState(null);
    const searchQuery = useContext(SearchContext);
    console.log(searchQuery);
    useEffect(() => {
        const fetchData = async () => {
            const ratingUrl = `https://codeforces.com/api/user.rating?handle=${handle}`;
            const ratingData = await ApiService(ratingUrl);

            if (ratingData && ratingData.status === 'OK') {
                setContestCount(ratingData.result.length);
            } else {
                setContestCount(0);
            }
        };

        fetchData();
    }, [handle]);

    return (
        

            {contestCount !== null ? (
                
Number of contests participated by {handle}: {contestCount}
            ) : (
                
Loading...
            )}
        
    );
}

export default NumberOfContestParticipated;

但是当我控制台记录 searchQuery 时，它给出了未定义的值。我做错了什么？

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import SearchContext from './Context/SearchContext';

ReactDOM.render(
  
    
  
  , document.getElementById('root')
);