我收到此错误 => TypeError:无法读取未定义的属性“图像”

阿里·托巴什

我在这方面很新,我在很多地方搜索过,都找不到解决方案。我收到错误“类型错误:无法读取未定义的属性‘图像’ ”。不知道问题出在哪里,错误的图片在这里。

在此处输入图片说明

有错误的类在这里。

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) 在这里

在此处输入图片说明

Wr1t3r

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

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

TypeError中的错误:无法读取未定义的属性“标志”

更新后的Angular 2我收到此错误:无法读取未定义的属性“区域”

收到TypeError:无法读取未定义的属性“查询”

错误TypeError:无法读取未定义的属性'length'

错误TypeError:无法读取未定义的属性'get'

错误TypeError:无法读取未定义的属性'nativeElement'

错误TypeError:无法读取未定义的属性“打开”

操作SDK会收到此错误TypeError:无法读取未定义的属性“输出”

呈现错误:“ TypeError:无法读取未定义的属性'text'”

作为错误:TypeError:无法读取未定义的属性“位置”

错误TypeError:无法读取未定义的属性'grower'

错误TypeError:无法读取角度未定义的属性'closeRow'

我收到此错误“ TypeError:无法读取未定义的属性'pagination'”

角度-错误TypeError:无法读取未定义的属性'title'

错误TypeError:无法读取未定义的属性“匹配”

错误TypeError:无法读取未定义的属性“调用”

我在我的React项目上收到此错误“ TypeError:无法读取未定义的属性'map'”

我为什么会收到此错误:Uncaught TypeError:无法读取未定义的属性“ john”

我收到了angular.js:12520TypeError错误:无法读取未定义的属性'then'。

收到此错误:无法读取未定义的属性“0”

我收到此错误请帮助无法读取未定义的属性“地图”

nodejs 收到错误 TypeError:无法读取未定义的属性“then”

收到此错误:无法读取未定义的属性“长度”

× 类型错误:无法读取未定义的属性“图像”

为什么我收到错误 - TypeError:无法读取未定义的属性“名称”

类型错误:无法读取未定义的属性(读取“图像”)

当我在我的反应应用程序中使用地图方法时,我收到此错误“无法读取未定义的属性(读取‘地图’)”

反应 - 错误:TypeError:无法读取未定义的属性(读取“then”)

“TypeError:无法读取未定义的属性(读取'hasOwnProperty')”错误