Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

137
Views
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 answers
Answer question

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 Report

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 Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!