我收到此错误 => TypeError: Cannot read property 'image' of undefined答案

【问题标题】：I got this error => TypeError: Cannot read property 'image' of undefined我收到此错误 => TypeError: Cannot read property 'image' of undefined
【发布时间】：2020-09-20 18:49:56
【问题描述】：

我是这个领域的新手，我搜索了很多地方都找不到解决方案。我收到错误“TypeError: Cannot read property 'image' of undefined”。不知道问题出在哪里。错误的图片在这里。

有错误的类在这里。

import React, {useEffect} from 'react';
import { Link } from 'react-router-dom';
import { useSelector, useDispatch } from 'react-redux';
import { detailsProduct } from '../actions/productActions';
function ProductScreen(props){

const productDetails = useSelector(state => state.productDetails);
const {product,loading,error} = productDetails;
const dispatch = useDispatch();

useEffect(() => {
    dispatch(detailsProduct(props.match.params.id));
    return () => {
        //
    }
}, [])

return <div>
    <div className="back-to-result">
        <Link to="/">Back to result</Link>
    </div>
    {loading?<div>Loading...</div>:
    error? <div>{error}</div>:
    (
    <div className="details">
        <div className="details-image">
            <img src={product.image} alt="product"></img>
        </div>
        <div className="details-info">
            <ul>
                <li>
                    <h4>{product.name}</h4>
                </li>
                <li>
                    {product.rating} Stars ({product.numReviews} Reviews)
                </li>
                <li>
                    Price: <b>${product.price}</b>
                </li>
                <li>
                    Description:
                    <div>
                        {product.description}
                    </div>
                </li>
            </ul>
        </div>
        <div className="details-action">
            <ul>
                <li>
                    Price: {product.price}
                </li>
                <li>
                    Status: {product.status}
                </li>
                <li>
                    Qty: <select>
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                    </select>
                </li>
                <li>
                    <button className="button">Add to Cart</button>
                </li>
            </ul>
        </div>
    </div>
    )
    }

</div>
}
export default ProductScreen;

console.log(productDetails) 在这里

【问题讨论】：

产品似乎未定义。您可以控制台登录productDetails 并发布结果吗？
我将结果添加到问题的末尾
product 在开头未定义。您需要将支票移到 return 语句之前。

标签： javascript node.js reactjs web

【解决方案1】：

这是因为它不认为或不知道“产品”上存在“图像”。你可以通过这个小改动来修复它：

{product.image && <img src={product.image} alt="product" />}

不过，您可能仍会在产品上的所有其他对象上遇到同样的问题。更好的解决方案可能是解构产品以确保碎片存在：

const { image, name, rating, numReviews, price, description, status } = product;

【讨论】：

错误表明product 是undefined，而不是它没有image 属性。

【解决方案2】：

您的变量product 未初始化。看起来您正在后台加载它，它可能不会在第一次加载时初始化，但可以稍后初始化，因此我会显示 loading 直到它被初始化。在您的代码中使用 product 变量之前，请务必检查：

if (!product) {
 return <div>Loading...</div>;
}

【讨论】：