Penerokaan aplikasi API Konteks
Saya telah mencuba pelbagai kaedah. Selepas membaca banyak penyelesaian di atas, saya masih belum dapat menyelesaikan masalah ini. Bolehkah sesiapa membantu saya menggunakan konteks dalam projek saya?
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 (
<SearchContext.Provider value={searchQuery} >
<Box display='flex' alignItems='center' justifyContent='center' paddingTop='20px'>
<Paper component="form" sx={{ p: '2px 10px', display: 'flex', width: '50%' }} onSubmit={handleSubmit}>
<IconButton type="button" sx={{ p: '10px' }} aria-label="search">
<AccountCircleIcon fontSize='large' />
</IconButton>
<InputBase
sx={{ ml: 1, flex: 1 }}
placeholder="Search User"
inputProps={{ 'aria-label': 'search user' }}
onChange={handleInputChange}
/>
<IconButton type="submit" sx={{ p: '10px' }} aria-label="search">
<SearchIcon fontSize='large' />
</IconButton>
</Paper>
</Box>
</SearchContext.Provider>
);
}
Itu yang saya gunakan. betul ke? Saya kemudian menggunakannya di sini
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 (
<div>
{contestCount !== null ? (
<p>Number of contests participated by {handle}: {contestCount}</p>
) : (
<p>Loading...</p>
)}
</div>
);
}
export default NumberOfContestParticipated;
Tetapi apabila saya konsol log searchQuery ia memberikan nilai yang tidak ditentukan. Apa yang saya buat salah?
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(
<SearchContext.Provider>
<App />
</SearchContext.Provider>
, document.getElementById('root')
);