“TypeError：無法解構'productDetails'的屬性'product'，因為它未定義”

Question

我目前正在嘗試在產品屏幕上顯示產品數據。 這是我在打開產品詳細信息屏幕時在控制台中遇到的錯誤。

TypeError：無法解構“productDetails”的屬性“product”，因為它未定義。

我不確定為什么 productDetails 未定義。 它應該包含產品詳細信息數據。

這是我的代碼。

ProductScreen.js

import React, { useEffect } from 'react';
import { useParams } from "react-router-dom";
import {Link} from "react-router-dom";
import { useSelector, useDispatch } from 'react-redux';
import { detailsProduct } from "../actions/productActions"

function ProductScreen() {
    const { id } = useParams();
    
    const productDetails = useSelector(state => state.productDetails);
    const {product, loading, error} = productDetails;
    const dispatch = useDispatch; 
    console.log("something");

    useEffect(() => {
        dispatch(detailsProduct(id));
        return () => {
            //
        };
    }, []);

    return <div>
        <div className="back-to-results">
            <Link to="/">Back to results</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>
                        {product.price}
                    </li>
                    <li>
                        Description:
                        <div>
                            {product.description}
                        </div>
                    </li>
                </ul>
            </div>
            <div className="details-action">
                <ul>
                    <li>
                        Price: <b>${product.price}</b>
                    </li>
                    <li>
                        Status: {product.status}
                    </li>
                    <li>
                        Qty: <select>
                            <option>1</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                            <option>5</option>
                        </select>
                    </li>
                    <li>
                        <button className="button">Add to Cart</button>
                    </li>
                </ul>
            </div>
        </div>
        )
}
    </div>
}
export default ProductScreen;

productActions.js

import { PRODUCT_LIST_FAIL, PRODUCT_LIST_REQUEST, PRODUCT_LIST_SUCCESS, PRODUCT_DETAILS_REQUEST, PRODUCT_DETAILS_SUCCESS, PRODUCT_DETAILS_FAIL } from "../constants/productconstants.js";
import axios from "axios";

const listProducts = () => async (dispatch) => {

    try {
        dispatch({type: PRODUCT_LIST_REQUEST});
        const {data} = await axios.get("/api/products");
        dispatch({type: PRODUCT_LIST_SUCCESS, payload: data});
    }
    catch (error) {
        dispatch({type: PRODUCT_LIST_FAIL, payload:error.message});
    }
}

const detailsProduct = (productId) => async (dispatch) => {
    try {
        dispatch({type: PRODUCT_DETAILS_REQUEST, payload: productId});
        const {data} = await axios.get("/api/products/" + productId);
        dispatch({type: PRODUCT_DETAILS_SUCCESS, payload: data});
    }
    catch (error) {
        dispatch({type: PRODUCT_DETAILS_FAIL, payload: error.message});
    }
}

export {listProducts, detailsProduct};

Answer 1

最初，當頁面呈現時 productDetails state 應該為空或未定義，盡管您已在 useEffect 中調度了 detailsProduct 但需要一些時間才能從 API 請求中獲取數據，這就是您收到錯誤的原因。 您可以使用 productDetails 而無需解構

productDetails?.loading
productDetails?.product?.name

productDetails 和 loading 之間的問號是 Optional Chaining 你可以閱讀更多： Optional Chaining