reactjs - 为什么读取对象的属性会使对象未定义？

Question

下面是我的代码，它从 Redux 获取数据：

function ProductsDetail(props){
    const dispatch = useDispatch();
    useEffect( () => {
        const fetch = async () => {
            const {data} = await axios.get("/api/products/" + props.match.params.id);
            dispatch(
                {
                type: "product_detail_success",
                payload: data
            })
        }
        fetch();
        return () => {};
    }, [])

    const {product} = useSelector((state) => {
        return state.productDetails
    });

    console.log(product)
    //console.log(product.image)

    return (
        <div>
        </div>
    )
}

该console.log(product)行打印出：

但是，如果我不注释掉以下console.log(product.image)行，Uncaught TypeError: Cannot read property 'image' of undefined就会出现错误。

image只是productobject 的一个属性，为什么在控制台上打印它会使productobject 未定义？

提前感谢！

标签： reactjsredux

Answer 1

在初始渲染product中未定义，因此：

console.log(product) // will show nothing
//console.log(product.image)

当它重新渲染时：

`console.log(product)` // This show what you see in you log

所以试试下面的代码：

console.log(product) // will show nothing
console.log(product?.image) // Add ? to make sure only get image when product defined