为啥我在 React 中得到“无法读取未定义的属性（读取 'map'）”，而没有语法错误

Posted 2023-04-14

【中文标题】为啥我在 React 中得到“无法读取未定义的属性（读取 \'map\'）”，而没有语法错误

【英文标题】：Why I get "Cannot read properties of undefined (reading 'map')" in React, while there is no syntax error为什么我在 React 中得到“无法读取未定义的属性（读取 'map'）”，而没有语法错误

【发布时间】：2021-12-27 12:37:55

【问题描述】：

我正在使用 React 进行电子商务，但出现错误提示

无法读取未定义的属性（读取“地图”）

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

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

    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>
        


    

【问题讨论】：

product: 您的初始状态产品是一个空对象。因此product.prices 是未定义的。 undefined 没有 .map 函数。要么将初始状态更改为不是空对象，要么更改代码以检查并使用空对象

@NicholasTower 当您获取数据时，这已经被 覆盖了。我为此使用了 graphQL 端点。提取与 product.name 等其他数据一起工作正常。

是的，当您最终下载数据时，product 将不再是空对象。问题在于第一次渲染。在第一次渲染时，您有一个空对象。

【参考方案1】：

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

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

【讨论】：

这对我有用。但是this.state.product.prices && this.state.product.prices.map 是做什么的呢？

确保您的集合“价格”在“产品”中定义，您不会收到错误消息。您的对象产品在初始渲染期间没有定义有效的属性“价格”。

这是对“this.state.product.prices”集合的有条件的空/未定义检查。它检查“价格”集合是否为空/未定义。

成功了，我必须删除console.log(this.state.product.prices)