Эта проблема возникает у меня последние несколько часов, и единственная причина, по которой я задаю вопрос так быстро, заключается в том, что не видно слишком много информации об этом c или на по крайней мере, это конкретная c точка.
В настоящее время у меня есть облачная функция, которая захватывает и сохраняет данные из стороннего API в мою базу данных Firebase Firestore. В моем веб-приложении я использую React и пытаюсь отобразить эти данные, сопоставив их со списком Items. Все элементы высокого уровня в дереве доступны, и все данные из них уже отображаются правильно.
Однако любой вложенный элемент возвращается с 'Cannot read property of undefined'. Когда консоль регистрирует мой контейнер верхнего уровня, все последующие данные отображаются в терминале. Я могу разбить его на массив верхнего уровня, который показывает мне эту структуру:
Мне нужно получить доступ к ключам в этих объектах, но, как я упоминал ранее, это то, что меня приветствует, когда я пытаюсь это сделать:
Uncaught TypeError: Cannot read property 'title' of undefined
at ProductScreen (ProductScreen.js:56)
Также вот код с текущего экрана, над которым я работаю, и то, как я пытаюсь доступ к данным:
import React, { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import { useSelector, useDispatch } from 'react-redux';
import { detailsProduct } from '../actions/productActions';
const ProductScreen = (props) => {
const [qty, setQty] = useState(1);
const productDetails = useSelector(state => state.productDetails);
const { product, loading, error } = productDetails;
const resp = props.match.params.id;
const dispatch = useDispatch();
useEffect(() => {
dispatch(detailsProduct(resp));
return () => {
//
};
}, []);
const handelAddToCart = () => {
props.history.push(`/cart/${resp}/?qty=${qty}`)
}
return <div>
<div className='back-to-result'>
<Link to='/'>Back to Results</Link>
</div>
{loading ? <div>Loading...</div> :
error ? <div>{error}</div> :
(
<div className='details'>
<div className='details-image'>
<img src={product.thumbnailImage //This ever comes through as well} alt='product'></img>
</div>
<div className='details-info'>
<ul>
<li>
<h4>{product.title}</h4> //This data comes through fine.
</li>
<li>
{product.rating} Stars ({product.numReviews} Reviews)
</li>
<li>
<b>{product.variants.price}</b>
</li>
<li>
Description:
<div>
{product.description // This data comes through fine}
</div>
<div>
<select>
{
console.log(product.sizes.title // Here is where I am trying to console log the Size Title)
}
</select>
</div>
</li>
</ul>
</div>
<div className='details-action'>
<ul>
<li>
<b>Price:</b> ${product.variants.price // This data does not come through either, has the same error}
</li>
<li>
Status: Currently Unavailable
</li>
<li>
Qty: <select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</li>
<li>
<button className='button' onClick={handelAddToCart}>Add to Cart</button>
</li>
</ul>
</div>
</div>
)
}
</div>
}
export default ProductScreen
Я не уверен, где и что делаю неправильно. Любая помощь будет принята с благодарностью. Спасибо.
* Приносим извинения за то, что изначально не включили основной код, не был уверен, будет ли он полезен. Если все, что я делал, это ведение журнала консоли, но я надеюсь, что это может дать лучшую перспективу по ситуации.