轉到頁面時，ReactuseParams給出空物件

我正在做一個個人React.js專案。我有問題useParams。單擊導航欄后，我無法顯示地圖專案??。它進入頁面，但無法顯示在螢屏上。它在螢屏上顯示一個空物件。這是ItemContainer我定義的地方useParams，我認為代碼有錯誤：

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>
        
    </>
  )
}

這是帶有完整代碼的代碼和框的

uj5u.com熱心網友回復：

您在處理回應資料方面遇到了一些問題。

導航欄

資料是一個物件，其中每個屬性都是一個鍵（種族分類？），其值為場地陣列。只需將鍵映射到鏈接。

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

物品容器

假設fetch函式正確并且venues狀態更新為正確的值，這里的問題是您只搜索鍵，只回傳鍵而不是陣列值。在這里，您可以簡單地將raceId用作訪問場地陣列的動態密鑰。

const para = venues[raceId] ?? [];

...

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

標籤：javascript 反应 目的 反应路由器 反应路由器-dom

上一篇：如何在JavaScript中將一個物件“遷移”到另一個物件？

下一篇：使用變數名值創建字典