Почему чтение атрибутов объекта делает объект неопределенным?

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 объект undefine?

С уважением!

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