我在这方面很新,我在很多地方搜索过,都找不到解决方案。我收到错误“类型错误:无法读取未定义的属性‘图像’ ”。不知道问题出在哪里,错误的图片在这里。
有错误的类在这里。
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>;
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句