Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

141
Vistas
No se pueden leer las propiedades de undefined (leyendo 'nombre'). este producto indefinido

Tengo un problema con la lectura de {find}. El problema está en ProductDetail.js. Primero, haga clic en el enlace de productos que en cualquier producto para ver los detalles. TypeError: no se pueden leer las propiedades de nulo (leyendo 'buscar') https://codesandbox.io/s/react-router-product-detail-pages-dynamic-links-forked-y1o0n?file=/src/ProductDetail.js: 418-429

about 4 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

Ha cometido algunos errores en su archivo ProductDetail.js .

Primero:

Puede usar useEffect hook para verificar y comparar si hay una matching id o no.

Segundo:

Puede usar useState hook para almacenar thisProduct y actualizar el valor de thisProduct llamando a setThisProduct y utilícelo en JSXElement .

Esta es siempre una mejor práctica para usar el state para el conjunto y la obtención de datos.

Aquí hay más información sobre React.Hooks

Tercero:

Price es un objeto y no puede renderizar su objeto de esa manera, así que use la clave en lugar del objeto mientras renderiza. así: {thisProduct?.price?.current?.value}

Puede obtener más información sobre el encadenamiento opcional

Cuatro:

productId que obtiene de useParams es un tipo de cadena, y su productId de sneakers es un tipo de número. Por lo tanto, debe cambiar su productId de producto a número mientras compara de esta manera: Number(productId)

Aprenda sobre Números en Js

Aquí está el código completo de la suya:

 // ProductDetail.js import React, { useContext, useEffect, useState } from "react"; import { useParams } from "react-router-dom"; import { StateContext } from "./GlobalContext"; function ProductDetail() { const { productId } = useParams(); const { sneakers } = useContext(StateContext); const [thisProduct, setThisProduct] = useState({}); useEffect(() => { if (sneakers) { const findProduct = sneakers.find((product) => { return product.id === Number(productId); }); console.log("findproduct", findProduct); setThisProduct(findProduct); } }, [productId, sneakers]); return ( <div> {thisProduct && ( <> <h1>{thisProduct?.name}</h1> <p>Price: {thisProduct?.price?.current?.value}</p> <p>{thisProduct?.description}</p> </> )} </div> ); } export default ProductDetail;
about 4 years ago · Juan Pablo Isaza Denunciar

0

verifique completamente su estado y accesorios, no está proporcionando datos válidos al componente secundario

 <StateContext.Provider value={{ sneakers }}> {console.log(sneakers, "== thisProduct")} {children} </StateContext.Provider>

la consola mostrará sus datos, siendo nulos, así que ese es el problema

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda