Ich habe viele Methoden ausprobiert. Nachdem ich viele der oben genannten Lösungen gelesen habe, konnte ich dieses Problem immer noch nicht lösen. Kann mir jemand helfen, Kontext in meinem Projekt zu verwenden?

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 (              ); }

Das verwende ich. ist es richtig ? Ich habe es später hier verwendet

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;

Aber wenn ich searchQuery protokolliere, gibt es einen undefinierten Wert. Was habe ich falsch gemacht?

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') );