Почему я получаю "Не могу прочитать свойства неопределенного (чтение" карты") " в React, в то время как синтаксической ошибки нет

#javascript #reactjs #react-context #map-function

Вопрос:

Я занимаюсь электронной коммерцией с 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 (lt;divgt;Something went wronglt;/divgt;)  }  else if (productFetched){   return(  lt;divgt;  lt;h2gt; {this.state.product.name} lt;/h2gt;   lt;h5gt;  {/*There is an error here*/}  { this.state.product.prices.map(  price =gt;{  if (price.currency == selectedCurrency){  return( lt;gt; { getSymbolFromCurrency(selectedCurrency)  " "  price.amount }lt;/gt; )  }  }  )}  lt;/h5gt;   lt;button onClick={() =gt; {  addProduct(this.props.product.itemId, this.state.product.prices)  }}gt; Add lt;/buttongt;  lt;h4gt;{productsToPurchase[this.props.itemIndex].qty}lt;/h4gt;  lt;hr/gt;  lt;/divgt;  )   }  else {  return lt;pgt;Loading............lt;/pgt;  }    } }

1. product: {} В вашем начальном состоянии продукт является пустым объектом. Следовательно product.prices , не определено. неопределенное не имеет никакой .map функции. Либо измените начальное состояние, чтобы оно не было пустым объектом, либо измените свой код для проверки и работы с пустым объектом

2. @NicholasTower, который уже переопределяется {} при получении данных. Для этого я использую конечную точку GraphQL. Выборка отлично работает с другими данными, такими как product.name .

3. Да, когда вы в конечном итоге загрузите данные, product они больше не будут пустым объектом. Проблема в первом рендере. При первом рендеринге у вас есть пустой объект.

Ответ №1:

Вам нужно проверить this.state.product.prices , существует ли он в объекте. Вы получаете эту ошибку, так как коллекция пуста во время первого рендеринга.

 { this.state.product.prices   amp;amp; this.state.product.prices.map(  price =gt;{  if (price.currency == selectedCurrency){  return(   lt;gt;   {   getSymbolFromCurrency(selectedCurrency)  " "  price.amount }.   lt;/gt; )  }  }  )}

1. Это сработало со мной. Но что же this.state.product.prices amp;amp; this.state.product.prices.map делать?

2. Убедитесь, что ваша коллекция «цены» определена внутри «продукта», и вы не получите ошибку. У вашего объектного продукта нет действительного свойства «цены», определенного во время начальной визуализации.

3. Это условная нулевая/неопределенная проверка коллекции «this.state.product.prices». Он проверяет, является ли коллекция «цены» нулевой/неопределенной.

4. Это сработало, и мне пришлось удалить console.log(this.state.product.prices)