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

Question

我正在使用React进行电子商务，我收到了一个错误，比如

无法读取未定义(读取"映射"(的属性

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

下面是我的代码，并对不起作用的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 }.  
</> )
}
}
)}