javascript - 我收到此错误 => TypeError: Cannot read property 'image' of undefined
问题描述
我在这个领域很新,我搜索了很多地方,找不到解决方案。我收到错误“ 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) 在这里
解决方案
您的变量product
未初始化。看起来您正在后台加载它,它可能不会在第一次加载时初始化,但可以稍后初始化,因此我会显示loading
它直到它被初始化。在您的代码中使用product
变量之前,请务必进行以下检查:
if (!product) {
return <div>Loading...</div>;
}
推荐阅读
- google-chrome-extension - 由于安全问题,无法在带有 manifest v3 的 chrome 扩展中运行 Create-React-App
- laravel - Laravel dd() 在我卸载了点火错误页面包后停止工作
- android-studio - 查看类选项未在 android studio 中显示
- haskell - 使用 Haskell 和 SBV 进行列表理解的条件
- python - 如何阻止python产生随机线程?
- python - 使用 Styleframe 从 Excel 中提取单个单元格的样式
- reactjs - 使用 Parcel 将 React 应用程序捆绑为单个文件 JS
- java - Android - 远程限制设备
- java - (Minecraft Spigot API 1.16.5)绕过点击hitbox(将命中转移到不同的暴徒)
- swift - Swift Combine - 访问单独的发布者列表