为什么读取对象的属性会使对象变得不确定？

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只是product对象的一个​​属性，为什么在控制台上打印它会使product对象变得不确定？

感谢前进！

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