React项目Review页面无法读取产品属性，页面空白求助

问题描述 #

React项目的Review页面中，调用产品name、price等属性时页面显示空白，但控制台能看到JavaScript输出，所有产品属性均无法在页面正常展示。

相关代码 #

Review.js #

import React, { useEffect, useState } from 'react'; 
import fakeData from '../../fakeData'; 
import {getDatabaseCart} from '../../utilities/databaseManager';
import ReviewItem from '../ReviewItem/ReviewItem';

const Review = () => {
const [cart, setCart] = useState([]);
    
useEffect(()=>{
    //cart
    const savedCart = getDatabaseCart();
    const productKeys = Object.keys(savedCart);

    const cartProducts =  productKeys.map( key => {
        const product = fakeData.find( pd => pd.key === key);
        
        return product;
    });
    setCart(cartProducts);
}, []);

return (
    <div>
        <h1>Cart Item : {cart.length}</h1>
        {
                cart.map(pd => <ReviewItem 
                    key={pd.key}
                    product={pd}></ReviewItem>)
            }
    </div>
);
};

export default Review;

ReviewItem.js #

import React from 'react';

const ReviewItem = (props) => { const {name, quantity, price} = props.product;
return (
    <div >
        <h4 >{name}</h4>
        <p>Quantity: {quantity}</p>
        <p><small>$ {price}</small></p>
        
    </div>
);
};
export default ReviewItem;

问题分析 #

1. 缺失quantity属性：从fakeData中获取的产品对象不包含quantity字段，而savedCart中存储了该属性，但未合并到最终的产品对象中，导致ReviewItem中quantity为undefined。
2. 潜在的undefined产品：如果fakeData中找不到对应key的产品，find方法会返回undefined，直接传递给ReviewItem会导致解构失败，引发属性无法渲染。
3. 初始空数组渲染：组件初始渲染时cart为空数组，若数据处理不当，可能导致短暂的空白或渲染异常。

解决方案 #

1. 合并quantity属性到产品对象 #

修改Review.js中map方法内的逻辑，将savedCart中的quantity合并到找到的产品对象中：

const cartProducts = productKeys.map(key => {
    const product = fakeData.find(pd => pd.key === key);
    // 合并quantity属性
    if (product) {
        product.quantity = savedCart[key];
    }
    return product;
});

2. 过滤无效产品，避免渲染错误 #

在设置cart状态前，过滤掉undefined的产品：

setCart(cartProducts.filter(pd => pd));

3. 给属性添加默认值（可选） #

在ReviewItem中解构属性时添加默认值，确保即使属性缺失也能正常显示：

const {name = '未命名产品', quantity = 1, price = 0} = props.product || {};

修改后的完整代码 #

修改后的Review.js #

import React, { useEffect, useState } from 'react'; 
import fakeData from '../../fakeData'; 
import {getDatabaseCart} from '../../utilities/databaseManager';
import ReviewItem from '../ReviewItem/ReviewItem';

const Review = () => {
const [cart, setCart] = useState([]);
    
useEffect(()=>{
    const savedCart = getDatabaseCart();
    const productKeys = Object.keys(savedCart);

    const cartProducts = productKeys.map(key => {
        const product = fakeData.find(pd => pd.key === key);
        if (product) {
            product.quantity = savedCart[key];
        }
        return product;
    });
    // 过滤掉undefined的产品
    setCart(cartProducts.filter(pd => pd));
}, []);

return (
    <div>
        <h1>Cart Item : {cart.length}</h1>
        {
            cart.map(pd => <ReviewItem 
                key={pd.key}
                product={pd}></ReviewItem>)
        }
    </div>
);
};

export default Review;

修改后的ReviewItem.js #

import React from 'react';

const ReviewItem = (props) => { 
    const {name = '未命名产品', quantity = 1, price = 0} = props.product || {};
    return (
        <div >
            <h4>{name}</h4>
            <p>Quantity: {quantity}</p>
            <p><small>$ {price}</small></p>
        </div>
    );
};
export default ReviewItem;

内容的提问来源于stack exchange，提问作者A.Al Mahmud Pias