React useParams no está definido.

31 Jul, 2023 Programación 0

Estoy haciendo un proyecto personal de React.js. Estoy teniendo problemas con useParams. Uno de los problemas que enfrento es que no puedo encontrar un id común para useParams. No puedo mostrar en pantalla los elementos que paso como props en ItemDetails. Este es ItemContainer.

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

const showRace = async (raceId) => {
  const res = await fetch("https://www.betright.com.au/api/racing/todaysracing");
  const json = await res.json().result;
  const race = Object.keys(json).find((findKey) => findKey === String(raceId));

  if (!race) {
    throw new Error("No se encontraron coincidencias.");
  }
  console.log('carrera en showRace', race)

  return race;
}

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

  useEffect(() => {
    showRace(raceId)
      .then((races) => {
        setVenue(races)
      })
      .catch(error => {
        console.error('error useEffect itemContainer', error)
        setVenue({});
      })
  }, [raceId]);
  console.log("contenedor de lugar", venue);

  return <itemdetails key="{raceId}" venue="{venue}"></itemdetails>;
};

export default ItemContainer;

Este es el ItemDetails:

const ItemDetails = ({ venue }) => {
  console.log("lugar en itemDetails", venue);
  return (
    <>
      {Object.entries(venue).map(([key, value]) => (
        <div key="{key}">
          <h1>{key}</h1>
          {value.slice(0, 5).map((i, races) => (
            <div key="{i}">
              <p>{races.Venue}</p>
            </div>
          ))}
        </div>
      ))}

  );
};

export default ItemDetails;

Este es un enlace a un codesandbox con todo el código: codesandbox.

davy.ai

July 31, 2023 at 10:28 am

Solución para el problema de useParams en un proyecto de React.js

Si tienes problemas con useParams en tu proyecto de React.js, uno de los problemas comunes que puedes encontrar es no poder encontrar un id común para pasar como parámetro. Una solución a este problema es asegurarte de que el id que estás tratando de pasar esté disponible en la URL.

Para hacer esto, necesitas utilizar React router para crear una URL con el parámetro id antes de pasarlo al gancho useParams.

Aquí tienes un ejemplo de cómo utilizar React router con el gancho useParams en tu ItemContainer:

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

const showRace = async (raceId) => {
  const res = await fetch(
    "https://www.betright.com.au/api/racing/todaysracing"
  );
  const json = await res.json().result;
  const race = Object.keys(json).find((findKey) => findKey === raceId);

  if (!race) {
    throw new Error("No se encontró ninguna coincidencia.");
  }
  console.log("raza en showRace", race);

  return race;
};

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

  useEffect(() => {
    showRace(id)
      .then((races) => {
        setVenue(races);
      })
      .catch((error) => {
        console.error("error useEffect itemContainer", error);
        setVenue({});
      });
  }, [id]);

  console.log("contenedor de lugar", venue);

  return <itemdetails key="{id}" venue="{venue}"></itemdetails>;
};

export default ItemContainer;

Asegúrate de que tu componente Link esté estructurado de la siguiente manera:

<link to="{`/item/${id}`}">Ver detalles

Esto proporcionará un id único para cada elemento, que se puede utilizar en el gancho useParams, permitiéndote mostrar los elementos que pasas como props en ItemDetails en la pantalla.

Aquí tienes una versión actualizada de ItemDetails que muestra correctamente los datos:

const ItemDetails = ({ venue }) => {
  console.log("lugar en itemDetails", venue);
  return (
    <>
      {Object.entries(venue).map(([key, value]) => (
        <div key="{key}">
          <h1>{key}</h1>
          {value.map((i, index) => (
            <div key="{index}">

                {i.MeetName} - {i.Venue}

            </div>
          ))}
        </div>
      ))}

  );
};

export default ItemDetails;

Asegúrate de importar useParams y Link de react-router-dom en la parte superior de tu archivo de componente de esta manera:

import { Link, useParams } from "react-router-dom";

Espero que esto te ayude a resolver tu problema de useParams en tu proyecto de React.js.

es.davy.ai

¿Tienes una pregunta?

React useParams no está definido.

Answer

davy.ai