Блог

Я начинающий в React js.Я получил ошибку Ниже при использовании useParams(); Ниже приведена ошибка;

 Uncaught TypeError: Object is not a function
    at MatchPage (MatchPage.js:8)
    at renderWithHooks (react-dom.development.js:14985)
    at mountIndeterminateComponent (react-dom.development.js:17811)
    at beginWork (react-dom.development.js:19049)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at beginWork$1 (react-dom.development.js:23964)
    at performUnitOfWork (react-dom.development.js:22776)
    at workLoopSync (react-dom.development.js:22707)
    at renderRootSync (react-dom.development.js:22670)
    at performSyncWorkOnRoot (react-dom.development.js:22293)
    at scheduleUpdateOnFiber (react-dom.development.js:21881)
    at updateContainer (react-dom.development.js:25482)
    at react-dom.development.js:26021
    at unbatchedUpdates (react-dom.development.js:22431)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:26020)
    at Object.render (react-dom.development.js:26103)
    at Module.<anonymous> (index.js:7)
    at Module../src/index.js (index.js:18)
    at __webpack_require__ (bootstrap:856)
    at fn (bootstrap:150)
    at Object.1 (reportWebVitals.js:14)
    at __webpack_require__ (bootstrap:856)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at main.chunk.js:1
 

Структура проекта

App.js

 import './App.css';
import {BrowserRouter as Router,Route,Switch} from 'react-router-dom';
import { TeamPage } from './pages/TeamPage';
import { MatchPage } from './pages/MatchPage';

function App() {
  return (
   <div className = "App"> 
    <Router>
      <Switch>


        
 
        <Route exact path="/teams/:teamName" >
          <TeamPage />
        </Route>

        <Route  path="/teams/:teamName/matches/:year">
          <MatchPage />
        </Route>  

       

      </Switch>

    </Router> 
  </div>
  );
}

export default App;
 

MatchPage.js

 import { React,useEffect, useState} from 'react';
import { MatchDetailCard } from '../components/MatchDetailCrd';
import { MatchSmallCard } from '../components/MatchSmallCard';
import { useParams } from 'react-router-dom';
export const MatchPage = () =>{
  
  const [matchess,setMatches] = useState([]);
  const [teamName,year]=useParams();//Error is here
  useEffect( 
    ()=>{
        const fetchMatches = async()=>{
           const response = await fetch(`http://localhost:8080/team/${teamName}/matches?year=${year}`);
           const data = await response.json();
           console.log(data);
           setMatches(data);
            
        };
        fetchMatches();

    },[]
);
  return (
      <div className = "MatchPage"> 
      <h1>Match Page</h1>
          {
              matchess.map(match=><MatchDetailCard teamName={teamName} match={match}/>)
          }
      </div>
    
  );
}
 

Как Бы То Ни Было TeamPage.js работает хорошо, и я мог бы извлечь там имя команды param.
Тот же код используется в MatchPage.js. Но не работает.

Зависимости PFB

 {
  "name": "ipl-frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.12.0",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "
 

Эта страница работает. Но ниже URL на снимке экрана не работает

Пожалуйста, помогите.версия React js 17

Способ, которым вы использовали параметры использования в компоненте MatchPages, неверен.

 const [teamName,year]=useParams(); //Error is here
 

Это неверно, так как параметры использования предоставляют объект, поэтому правильный способ деструкции был бы таким-

 const { teamName,year }=useParams();
 

Теперь вы можете использовать его в компоненте MatchPage.

Прикрепление URL — адреса для документов- https://reactrouter.com/web/example/url-params