React useParams 在進入頁面時給出空的 object

Question

我正在做一個個人React.js項目。 我遇到了useParams問題。 單擊導航欄后，我無法顯示 map 項目。 它進入頁面，但無法在屏幕上顯示。 它在屏幕上顯示一個空的 object。 這是我定義useParams的ItemContainer ，我認為代碼有錯誤：

import { useEffect, useState } from "react";

import ItemDetails from "../Itemdetails";
import { useParams } from "react-router-dom";

const ItemContainer = () => {
  const [venue, setVenue] = useState({});
  const { raceId } = useParams();

  useEffect(() => {
    fetch("https://www.betright.com.au/api/racing/todaysracing")
      .then((res) => {
        return res.json();
      })
      .then(
        (data) => {
            setVenue(data);
          console.log("data useEffect", data);
        },
        (err) => {
          return console.error(err);
        }
      );
  }, []);
  console.log("venue container", {venue});

  const para = Object.keys(venue).find((findKey) => findKey === raceId);
  console.log('para', para)

  return (
      <ItemDetails key={para} venue={venue} />
  );
};

export default ItemContainer;

這是我要在其中顯示項目的ItemDetails ：

const ItemDetails = ({ venue }) => {
    console.log('venue itemDetails', venue)
    return (
        <> 
        {venue.slice(0, 5).map(races => (
            <>
            <p>{races.Venue}</p>
            <p>Race Number: {races.Race1?.RaceNumber}</p>
            </>
        ))}
        </>
    );
}
 
export default ItemDetails;

這是導航欄：

import { useEffect, useState } from "react";

import { NavLink } from "react-router-dom";
import styles from './Navbar.module.css';

const Navbar = () => {
    const [result, setResult] = useState([]);

    useEffect(() => {
      fetch("https://www.betright.com.au/api/racing/todaysracing")
        .then((res) => {
          return res.json();
        })
        .then(
          (data) => {
            setResult(data);
            console.log("data useEffect", data);
          },
          (err) => {
            return console.error(err);
          }
        );
    }, []);
    console.log("result of Navbar", result);
    
    return (
        <>            
            <div className={styles.navbarContainer}>
                <NavLink to='./races' 
                className={styles.navbarHome} 
                style={({ isActive }) => ({
                  color: isActive ? '#fff' : '#f4f4f4',
                  background: isActive ? '#7600dc' : '#7600dc',
                })}>Home</NavLink>
                {Object.entries(result).map(([key, value]) => (
                    <div className={styles.navbarItems} key={key}>
                        {value.slice(0, 1).map((i, race) => (
                            <NavLink 
                                key={i}
                                to={`/race/${key}`}
                                style={({ isActive }) => ({
                                    color: isActive ? '#fff' : '#d3d3d3',
                                    background: isActive ? '#7600dc' : '#7600dc',
                                    textDecoration: isActive ? 'none' : 'none'
                                    })}>{key}</NavLink>
                        ))}                            
                    </div>                                  
                ))}
            </div>
        </>
    );
}
 
export default Navbar;

這是 App.js

const App = () => {
  return (
    <>
        <Router>
            <Navbar />
            <Routes>
                <Route path='/races' element={<Home />} />
                <Route path="/" element={<Navigate replace to="/races" />} />
                <Route path="/race/:raceId" element={<ItemContainer />} />
            </Routes> 
        </Router>
        
    </>
  )
}

這是包含整個代碼的代碼和框的鏈接。

更新

這是數據的模擬。 API 的原件有各種不同的值，只有Throughbred、Harness 和Greyhound 的keys 是useParams 找到的共同點。 這是一個新的鏈接，包含整個代碼加上 mocked 的數據。 您還可以在下面找到模型數據：

    const data = {
      Throughbred: [
        {
            VenueID: 674,
            Venue: "Santa Anita Park",
            Race1: {
              EventTypeId: 1,
              EventId: 6177745,
              VenueId: 0,
              Venue: null,
              CountryCode: null,
              RaceNumber: 6,
              AdvertisedStartTime: "/Date(1641036900000)/",
              ResultStatusId: 0,
              SecondsToJump: 609,
              HasFixedMarkets: false,
              IsOpenForBetting: false,
              MarketShortcuts: null,
              Results: null,
              MasterCategoryName: null,
              EventName: null,
            },
            CountryCode: "USA",
            MasterCategoryName: "Overseas-Racing",
          },
          {
            VenueID: 674,
            Venue: "Santa Anita Park",
            Race1: {
              EventTypeId: 1,
              EventId: 6177745,
              VenueId: 0,
              Venue: null,
              CountryCode: null,
              RaceNumber: 6,
              AdvertisedStartTime: "/Date(1641036900000)/",
              ResultStatusId: 0,
              SecondsToJump: 609,
              HasFixedMarkets: false,
              IsOpenForBetting: false,
              MarketShortcuts: null,
              Results: null,
              MasterCategoryName: null,
              EventName: null,
            },
            CountryCode: "USA",
            MasterCategoryName: "Overseas-Racing",
          }
        ],
    
      Harness: [{
        VenueID: 674,
        Venue: "Santa Anita Park",
        Race1: {
          EventTypeId: 1,
          EventId: 6177745,
          VenueId: 0,
          Venue: null,
          CountryCode: null,
          RaceNumber: 6,
          AdvertisedStartTime: "/Date(1641036900000)/",
          ResultStatusId: 0,
          SecondsToJump: 609,
          HasFixedMarkets: false,
          IsOpenForBetting: false,
          MarketShortcuts: null,
          Results: null,
          MasterCategoryName: null,
          EventName: null,
        },
        CountryCode: "USA",
        MasterCategoryName: "Overseas-Racing",
      },
      {
        VenueID: 674,
        Venue: "Santa Anita Park",
        Race1: {
          EventTypeId: 1,
          EventId: 6177745,
          VenueId: 0,
          Venue: null,
          CountryCode: null,
          RaceNumber: 6,
          AdvertisedStartTime: "/Date(1641036900000)/",
          ResultStatusId: 0,
          SecondsToJump: 609,
          HasFixedMarkets: false,
          IsOpenForBetting: false,
          MarketShortcuts: null,
          Results: null,
          MasterCategoryName: null,
          EventName: null,
        },
        CountryCode: "USA",
        MasterCategoryName: "Overseas-Racing",
      }
    ],
      Greyhound: [
        {
            VenueID: 674,
            Venue: "Santa Anita Park",
            Race1: {
              EventTypeId: 1,
              EventId: 6177745,
              VenueId: 0,
              Venue: null,
              CountryCode: null,
              RaceNumber: 6,
              AdvertisedStartTime: "/Date(1641036900000)/",
              ResultStatusId: 0,
              SecondsToJump: 609,
              HasFixedMarkets: false,
              IsOpenForBetting: false,
              MarketShortcuts: null,
              Results: null,
              MasterCategoryName: null,
              EventName: null,
            },
            CountryCode: "USA",
            MasterCategoryName: "Overseas-Racing",
          },
          {
            VenueID: 674,
            Venue: "Santa Anita Park",
            Race1: {
              EventTypeId: 1,
              EventId: 6177745,
              VenueId: 0,
              Venue: null,
              CountryCode: null,
              RaceNumber: 6,
              AdvertisedStartTime: "/Date(1641036900000)/",
              ResultStatusId: 0,
              SecondsToJump: 609,
              HasFixedMarkets: false,
              IsOpenForBetting: false,
              MarketShortcuts: null,
              Results: null,
              MasterCategoryName: null,
              EventName: null,
            },
            CountryCode: "USA",
            MasterCategoryName: "Overseas-Racing",
          }
        ]
}
export default data;

此外，這是console.log(result)的屏幕截圖

Answer 1

您在如何處理響應數據方面存在一些問題。

導航欄

數據是一個對象數組，其中每個 object 都有一個鍵（種族分類？ ），其值是另一個場地數組。 導航欄將數據視為Navbar 。 Map 外部數組，然后為每個數組元素 object map 鏈接鍵。

{result.map((el) => {
  return Object.keys(el).map((key) => (
    <div className={styles.navbarItems} key={key}>
      <NavLink
        key={key}
        to={`/race/${key}`}
        style={({ isActive }) => ({
          color: isActive ? "#fff" : "#d3d3d3",
          background: isActive ? "#7600dc" : "#7600dc",
          textDecoration: isActive ? "none" : "none"
        })}
      >
        {key}
      </NavLink>
    </div>
  ));
})}

物品容器

假設fetch功能正確並且venues state 更新為正確的值，這里的問題再次將數據視為 object 而不是數組。 在數組中搜索具有與raceId路由參數匹配的屬性的 object。

const para = data.find((value) => value.hasOwnProperty(raceId))[raceId];

...

return para.map((venue) => <ItemDetails key={venue.VenueID} venue={venue} />);