为什么我在 React 中得到 "Cannot read properties of undefined (reading 'map')" 而没有语法错误

Question

我正在使用 React 进行电子商务，但我收到一条错误消息

Cannot read properties of undefined (reading 'map')

这没有意义，因为我在另一个组件中做了同样的事情并且效果很好。

下面是我的代码，其中包含对不起作用的地图功能的评论。如果有什么不清楚的，请告诉我。我检查了语法错误，一切正常

    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>
        }


    }
}

Answer 1

您需要检查对象中是否存在 this.state.product.prices。您收到此错误是因为在第一次渲染期间集合为空。

{ this.state.product.prices 
 && this.state.product.prices.map(
    price =>{
       if (price.currency == selectedCurrency){
           return( 
              <> 
               { 
               getSymbolFromCurrency(selectedCurrency) +" "+ price.amount }.  
               </> )
              }
           }
        )}

为什么我在 React 中得到 "Cannot read properties of undefined (reading 'map')" 而没有语法错误

Why I get "Cannot read properties of undefined (reading 'map')" in React, while there is no syntax error

javascript

reactjs

map-function

react-context