转到页面时，React useParams 给出空对象 [英] React useParams gives empty object when goes to page

问题描述

我正在做一个个人 React.js 项目.我在使用 useParams 时遇到问题.单击导航栏后，我无法显示地图项目​​.它进入页面，但无法显示在屏幕上.它在屏幕上显示一个空对象.这是我定义 useParams 的 ItemContainer，我认为代码有错误:

I am doing a personal React.js project. I am having issues with useParams. I cannot display map items after clicking on the navbar. It goes to the page, but not able to show on screen. It shows an empty object on screen. This is the ItemContainer where I defined useParams and I think has an error on the code:

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:

This is the ItemDetails where I want to display the item:

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;

))}

</>);}导出默认导航栏；

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

这是 App.js

This is a mock of the data. The original from the API has all different values, only the keys of Throughbred, Harness and Greyhound are a common thing for the useParams that have found. This is a new link with the whole code plus the data mocked. Below you can find the mock up data as well:

这是一个

推荐答案

您在处理响应数据的方式方面存在一些问题.

解决方案

导航栏

数据是一个对象，其中每个属性都是一个键(种族分类?)，其值为场地数组.只需将键映射到链接即可.

Navbar

The data is an object where each property is a single key (a race classification?) with value that is the array of venues. Simply map the keys to links.

))}

物品容器

假设 fetch 正常运行并且 venues 状态更新为正确的值，这里的问题是您只搜索键，只返回键而不是数组值.在这里，您可以简单地使用 raceId 作为动态密钥来访问场地数组.

Assuming the fetch functions correctly and the venues state is updated to the correct value the issue here is you are searching through only the keys, returning only the key instead of the array value. Here you can simply use the raceId as the dynamic key to access the venue array.

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

...

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

这篇关于转到页面时，React useParams 给出空对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！