0

Estoy practicando React con una tienda virtual. Tengo un un componente ProductData.js en la que está la const products, que es la array en la que tengo los datos de todos los productos. Esa info la pasé a Product.js, en la que construí la card de cada uno de los productos. Y cree un home llamado Products.js en el que con un map hice que se puedan ver todos los productos.

El problema está en que ahora quiero que al hacer click en "Ver detalles" se abra una página en la que se pueda ver toda la información del producto en el que se hizo click. Eso lo estoy trabajando en el componente Detail.js Yo pensé que podía pasar la data a Detail de la misma forma que lo había hecho a Product, pero no me funciona.

Les comparto el comienzo del código de Detail.js para que vean lo que intenté:

import React from 'react';
import accounting from 'accounting'; //para que el precio se muestre con formato de moneda
import { useStateValue } from '../../StateProvider'; //
import { actionTypes } from '../../reducer'; //
import './detail.css';
import { Link } from "react-router-dom";
//Material UI
import ArrowBackIosIcon from "@mui/icons-material/ArrowBackIos";
import IconButton from '@mui/material/IconButton';
import { AddShoppingCart } from '@material-ui/icons';
import Filter1Icon from '@mui/icons-material/Filter1';
import LanguageIcon from '@mui/icons-material/Language';
import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
//Componente Rating
import Rating from '../Rating/Rating';
//Para probar si funciona hardcodeado
import anecdotas from '../../images/anecdotas.jpg'
import NicoBonder from '../../images/NicoBonder.jpg';
import products from '../../productData';

export default function Detail( props ) {
    const API_URL = 'http://localhost:3500/arrayProducts';
    const [arrayProducts, setArrayProducts] = useState([]);
    const [fetchError, setFetchError] = useState(null);
    const [isLoading, setIsLoading] = useState(true);
    const {id, name, author, regionTrip, image, price, rating, description, file, authorImg, authorDescription, pages, language, published} = props;
    const [{basket}, dispatch] = useStateValue();
    const addToBasket = () => {
        dispatch({
          type: actionTypes.ADD_TO_BASKET,
          item: {
            id,
            name,
            author,
            regionTrip,
            price,
            rating,
            image,
            description,
            file, authorImg, authorDescription, pages, language, published
          }
        })
      }

    useEffect(() => {
        const fetchItems = async () => {
            try {
                const response = await fetch(API_URL);
                if(!response.ok) throw Error('Hubo un error en los datos solicitados');
                const listItems = await response.json();
                setArrayProducts(listItems);
                setFetchError(null);
            } catch (err) {
                setFetchError(err.stack);
            } finally {
                setIsLoading(false);
            }
        }
        setTimeout(() => { //esto despues puedo borrarlo, es para simular el tiempo de carga
           (async () => await fetchItems())();
        }, 2000)
        
    }, [])
        
    return (
        <div className='detailComponent'>
            <div className='topSection'>
                <div className='leftColumn'>
                    <Link to="/" className="btnBack">
                        <ArrowBackIosIcon /> Volver
                    </Link>
                    <div className='freeSample'>
                        <h3>Lee las primeras páginas</h3>
                        <img src={image} />
                    </div>
                    <div className='aboutAuthor'>
                        <h3>¿Quién es el autor?</h3>
                        <div className='authorPresentation'>
                            <img src={NicoBonder} />
                            <h4>Nico Bonder</h4>
                        </div>
                        <p>Nico escribe cuentos hace más de 15 años y cuando comenzó a viajar sintió la necesidad de narrar las historias que atravezaba en sus viajes. Así nacieron sus primeras crónicas de viajes, en las que muestra los hechos más interesantes del viaje que hizo junto a su pareja Lu por Sudamérica. Sus escritos son directos, rápidos y cargados de acciones.</p>
                    </div>
                </div>

En donde dice <img src={image} /> y <img src={NicoBonder} /> deberían mostrarse unas imágenes que vienen de ProductData, pero no aparece nada.

En App.js la ruta para abrir la vista individual de los productos es: <Route path="/product/:id" element={} />

Espero que alguno me ayude porque intenté de varias formas y todavía no logré que la info de ProductData pase a Detail y no logro darme cuenta en dónde está el error. Muchas gracias.

8
  • tu componente, recibe un id, no un item.. o vas a buscar el item de vuelta a tu back.. o de alguna forma le pasas toda la info del item...
    – gbianchi
    Commented el 2 may. 2022 a las 22:59
  • Hola @gbianchi, no estoy seguro si te entendí. Yo lo que quiero es que al hacer click en un producto se vea toda la info de ese producto. Esa info la tengo en ProductData en una array, donde cada producto tiene un id. Lo del item supongo que lo decís por lo del dispatch. La verdad que ya no recuerdo bien por qué está hecho así, eso lo saqué de un tutorial. Qué me sugerís que haga? Gracias. Commented el 2 may. 2022 a las 23:02
  • Estas llamando a otra ruta que tiene otro componente.. este otro componente, no tiene ni idea de que item lo llamo.. O usas un store para guardar esa informacion, o tu nuevo componente, tiene que pedirle al back la informacion del id que estas recibiendo...
    – gbianchi
    Commented el 2 may. 2022 a las 23:06
  • Soy bastante nuevo así que no sé cómo hacer lo que me sugerís. No te referís a la ruta que puse en App, cierto? Por que esa funciona bien. Por lo que entiendo el item lo tengo dentro del dispatch y se usa solo si hago click en el botón del carrito. Pero no es lo que afecta a cómo traigo la info. Me decis que tengo que pedirle la info del id al back, en este caso el back lo estoy simulando nomás en ProductData, y eso es lo que no sé, cómo hago para pasar la info de ese archivo a Detail Commented el 2 may. 2022 a las 23:15
  • Si productData lo usas como un fake back deberias guardarlo en un json y acceder a el a traves de fetch o axios tal cual como harias en un back real Commented el 2 may. 2022 a las 23:52

2 respuestas 2

1

Encontré la solución por otro lado. Lo hice con un filter:

export default function Detail( props ) {
    const {id} =useParams()
    const [product, setProduct] = useState(null)
    const { name, author, regionTrip, image, price, rating, description, file, authorImg, authorDescription, pages, language, published} = props;
    const [{basket}, dispatch] = useStateValue();
    const addToBasket = () => {
        dispatch({
          type: actionTypes.ADD_TO_BASKET,
          item: {
            id,
            name,
            author,
            regionTrip,
            price,
            rating,
            image,
            description,
            file, authorImg, authorDescription, pages, language, published
          }
        })
      }

    useEffect(() => {
        const productFound = products.filter(e => e.id === +id)
        if(productFound.length > 0) {
            console.log(productFound)
            setProduct(productFound[0])
        }
       
    }, [])

Y para llamar a la info tengo que hacer product? Por ejemplo:

 <img src={product?.image} />
-2

lo que podés hacer es que cuando das click a un card, enviés el id del producto como parametro (useParams) y que usés el id para hacer una solicitud al backend, que te mande solo el registro del id

"SELECT * FROM t_productos WHERE id_Pk= ?"

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.