为什么我在 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
我正在使用 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>
}
}
}
您需要检查对象中是否存在 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')
这没有意义,因为我在另一个组件中做了同样的事情并且效果很好。
下面是我的代码,其中包含对不起作用的地图功能的评论。如果有什么不清楚的,请告诉我。我检查了语法错误,一切正常
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>
}
}
}
您需要检查对象中是否存在 this.state.product.prices
。
您收到此错误是因为在第一次渲染期间集合为空。
{ this.state.product.prices
&& this.state.product.prices.map(
price =>{
if (price.currency == selectedCurrency){
return(
<>
{
getSymbolFromCurrency(selectedCurrency) +" "+ price.amount }.
</> )
}
}
)}