Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

149
Visualizações
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 Respostas
Responde à pergunta

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 Relatório

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda