• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

450
Views
Por qué aparece "No se pueden leer las propiedades de undefined (leyendo 'mapa')" en React, aunque no hay ningún error de sintaxis

estoy haciendo un e-commerce con React y me sale un error digamos

No se pueden leer las propiedades de undefined (leyendo 'mapa')

Lo cual no tiene sentido porque he hecho lo mismo en otro componente y funciona bien.

Aquí está mi código a continuación con el comentario sobre la función de mapa que no funciona. Déjame si algo no está claro. Revisé los errores de sintaxis y todo funciona bien.

 export class CartItem extends Component { constructor(props) { super(props); this.state={ product: {}, failedToLoad: false } } async componentWillMount(){ let data = await this.getProduct(this.props.product.itemId); // let product = data.data.product; // this.setState({product: product}); if (data.data.product) { this.setState({product: data.data.product}); } else { this.setState({failedToLoad: true}); } } async getProduct(id){ return await fetchTheQuery( `query getProduct($id: String!){ product(id: $id){ name prices{ currency amount } } }`, {id: id} ) } render() { const {addProduct, productsToPurchase} = this.props.cartContext const {selectedCurrency} = this.props.currencyContext console.log(this.state.product.prices) let productFetched = this.state.product if (this.state.failedToLoad){ return (<div>Something went wrong</div>) } else if (productFetched){ return( <div> <h2> {this.state.product.name} </h2> <h5> {/*There is an error here*/} { this.state.product.prices.map( price =>{ if (price.currency == selectedCurrency){ return( <> { getSymbolFromCurrency(selectedCurrency) +" "+ price.amount }</> ) } } )} </h5> <button onClick={() => { addProduct(this.props.product.itemId, this.state.product.prices) }}> Add </button> <h4>{productsToPurchase[this.props.itemIndex].qty}</h4> <hr/> </div> ) } else { return <p>Loading............</p> } } }
almost 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

Debe verificar si this.state.product.prices existe en el objeto. Está recibiendo este error porque la colección está vacía durante el primer renderizado.

 { this.state.product.prices && this.state.product.prices.map( price =>{ if (price.currency == selectedCurrency){ return( <> { getSymbolFromCurrency(selectedCurrency) +" "+ price.amount }. </> ) } } )}
almost 3 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 Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error