未捕獲的類型錯誤：使用 axios 和 react-router-dom 時無法讀取未定義的屬性（讀取“參數”）

Question

它是 ReactJS 的 HomePage 組件

  import React from 'react';
  import axios from 'axios';
  import { useState, useEffect } from 'react';
  import { useNavigate,useParams } from 'react-router-dom';
  import { Main } from '../components/Main';
  import { Controls } from '../components/Controls';
  import { ALL_COUNTRIES } from '../config';
  import { List } from '../components/List';
  import { Card } from '../components/Card';
  import { Details } from './Details';

  export const HomePage = () => {
     const [countries,setCountries] = useState([]);
     const  navigate = useNavigate();

 useEffect(() => {
 axios.get(ALL_COUNTRIES).then(({data})=>setCountries(data))
 },[]);

  return (
     <>
     <Controls/>
     <List>
       {
       countries.map((c) => {
        const countryInfo = {
          img: c.flags.png,
          name: c.name,
          info: [
            {
              title:'Population',
              description:c.population.toLocaleString(),
            },
            {
              title:'Region',
              description:c.region,
            },
            {
              title:'Flag',
              description:c.capital,
            },
          ],
        };
        return (
          <Card
            key={c.name}
            onClick={(e) => {
              navigate('/country/${c.name}');
            }} 
            {...countryInfo}
          />
        )
      })
     }
    </List>
  </>
  );
 };

它是第二個組件 詳細信息

  import React from 'react';
  import { useParams } from 'react-router-dom';
  export const Details = ({match,params}) => {
   const { name } = useParams();
    return (
       <div>
         Details {match.params.name}  
       </div>
      );
     };

配置.js

 const BASE_URL = 'https://restcountries.com/v2/';
 export const ALL_COUNTRIES=BASE_URL+"all?fields=name,flags,population,capital,region";
 export const searchByContry=(name)=>BASE_URL+'name/'+name;
 export const filterByCode=(code)=>BASE_URL+'alpha?code'+code.join('');

APP.jsx

 import React from 'react';
 import ReactDOM from 'react-dom';
 import axios from 'axios';
 import { Route,Routes,Router,useParams} from 'react-router-dom';
 import {useState, useEffect} from 'react';
 import './App.css';
 import styled from 'styled-components';
 import Header from './components/Header';
 import { Main } from './components/Main';
 import {NotFound} from './pages/NotFound';
 import { HomePage } from './pages/HomePage';
 import { Details } from './pages/Details';
 function App() {

   return (
     <> 
       <Header/>
       <Main>
        <Routes>
        <Route path="/" element={<HomePage/>}/>
        <Route path="country/:name" element={<Details/>}/>
        <Route path="*" element={<NotFound/>}/>
      </Routes>
    </Main>
  </>
 );
 }

 export default App;

主頁本身看起來像這樣，但是當我點擊標志/卡片時，它按預期在第二頁上發送給我，但給了我這個錯誤 [2]： https ://i.stack.imgur.com/39HEw.png 另外，我是使用 react-router-domV6 和 Axios 以及這個 API https://restcountries.com/v2/all兩個組件都在 APP.js

Answer 1

Details正在嘗試從未定義的對象讀取params ，在這種情況下為props.match 。

<Route path="country/:name" element={<Details />} /> // <-- no props passed!

...

import React from 'react';
import { useParams } from 'react-router-dom';

export const Details = ({ match, params }) => { // <-- match undefined
  const { name } = useParams();
  return (
    <div>
      Details {match.params.name} // <-- Oops, can't read params of undefined
    </div>
  );
};

刪除道具並訪問從useParams掛鈎返回的值。

import React from 'react';
import { useParams } from 'react-router-dom';

export const Details = () => {
  const { name } = useParams();
  return (
    <div>
      Details {name}
    </div>
  );
};

目標路徑也格式不正確。 代碼navigate('/country/${c.name}')正在導航到字符串文字"/country/${c.name}" ，這可能不是您想要做的。 修復此問題以使用字符串模板文字代替將c.name值注入目標路徑。

navigate(`/country/${c.name}`) // note the backticks instead of single quotes

我經常發現使用generatePath實用程序函數來創建路徑值很有用/有幫助。

例子：

import { generatePath, useNavigate } from 'react-router-dom';

...

const path = generatePath("/country/:name", { name: c.name });
navigate(path);