0
142
VistasReact Router Dom El enlace dinámico proporciona datos incorrectos
Estoy tratando de hacer una página de proyecto dinámica usando react router dom v6, usando params da la identificación correcta en la consola, pero el proyecto que se muestra es incorrecto, aquí hay un ejemplo:
El "id: 7" es el del proyecto y está mal, pero el "6" a continuación es el id de los parámetros, que es el correcto.
Aquí está el código de la página del proyecto:
export function ProjectPage() { const {projectId} = useParams(); const project = filterData[projectId] const {title, mediaUrl} = project; console.log(project, projectId) return ( <div className={"project-page-body"}> <div className={"project-page-title"}> <h1 className={"project-item-title"}>{title}</h1> <p className={"description"}> Lorem ipsum filler text for project description. </p> </div> <div className={"project-page-image"}> <img src={mediaUrl} style={{width: "80vw", height: "auto" }}/> </div> </div> ); }´´´3 Respuestas
Responde la pregunta0
Id (no paramsId) es un tipo de número pero paramsId (no Id) es un tipo de cadena. Pasaste projectId, que es un tipo de cadena, por lo que necesitas convertir projectId a tipo de cadena usando el método toString() .
0
Para futuros avisos, la solución fue convertir projectId en un número entero.
Aquí está el código de trabajo:
const { projectId } = useParams(); const [project, setProject] = useState(); useEffect(() => { setProject( filterData.find((project) => project.id === parseInt(projectId)) ); }, [projectId]);0
Aquí ha hecho "const project = filterData[projectId]", lo que significa que projectId actuará como índice para la matriz filterData. Entonces, como el índice siempre comienza desde 0, se muestra el siguiente proyecto.
Entonces puedes hacerlo como "const project = filterData[projectId-1]"