Este es mi archivo Json que creé en mi aplicación.
export const Data = [ { id: 1, title: "Tilte 1", description: "Decription 1 Data", }, { id: 2, title: "Tilte 2", description: "Decription 2 Data", } ];Este es mi archivo principal desde donde lo navego. Uso el archivo json para mostrar todos los registros en la página. Cuando hago clic en el elemento seleccionado, obtendrá su identificación y navegará a otra página, donde puedo obtener los datos del elemento seleccionado provenientes de json.
import React from "react"; import { Data } from "./JSON" import { useNavigate } from 'react-router-dom' const Home = () => { let naviagte = useNavigate(); return ( <> {Data.map((data, key) => { return ( <div class="card" > <div class="card-body"> <h5 class="card-title" key={key.id}>{data.title}</h5> <p class="card-text">{data.description}</p> <button onClick={() => naviagte(`/service/${data.id}`)}>{data.title} </button> </div> </div> ); })} </> ) } export default Home;Cuando navego a otra página donde quiero mostrar todos los datos relacionados con la identificación seleccionada. Muestra solo la identificación, no todos los datos.
import React, {useState, useEffect} from "react"; import { Data } from "../home/JSON" import { useParams } from "react-router-dom"; const Service = () => { const { id } = useParams(); const [data, setData] =useState(''); console.log("check", data); useEffect(() => { setData (Data.map((_data) => _data.id === id )) }, [id]) return( <> {id} {data.title} {data.description} </> ) } export default Service;Por favor guíame lo que echo de menos aquí. Gracias de antemano
Dado que está importando los datos en ambos lugares, solo necesita encontrar los datos por la propiedad id en lugar de asignarlos a valores booleanos. Tenga en cuenta que su propiedad de id es un número, pero el parámetro de ruta de id será una cadena, por lo que deberá convertirlos a un tipo compatible para la verificación de igualdad estricta ( === ).
Ejemplo:
useEffect(() => { setData(Data.find((_data) => String(_data.id) === id)); }, [id]); Dado data se tratan como un objeto en el retorno de representación, querrá asegurarse de mantener un estado válido invariable. Actualice el estado de data inicial para que sea un objeto y compruebe que Array.prototype.find devolvió un objeto definido de la matriz de Data antes de actualizar el estado.
const Service = () => { const { id } = useParams(); const [data, setData] = useState({}); console.log("check", data); useEffect(() => { const data = Data.find((_data) => String(_data.id) === id); if (data) { setData(data); } }, [id]); return ( <> {id} {data.title} {data.description} </> ); };