React页面Card组件不显示问题求助

核心问题梳理 #

1. 数组空值判断完全错误：JavaScript里[] !== []永远为true，因为两个空数组是不同的引用。Home.js里用foodCat !== []和foodItems !== []判断是否有数据，等于没判断——数据没加载时也会执行map，只是空数组map不会输出内容，但逻辑上存在隐患。
2. Card组件初始化时的未定义错误：Card里的useEffect在组件刚挂载就拿priceRef.current.value，这时候DOM还没渲染完，priceRef.current可能是undefined，导致size变成undefined，options[size]拿到undefined，finalPrice变成NaN，直接卡渲染。
3. 购物车逻辑里的空数组判断错误：Card里if (food !== [])同样是无效判断，空数组引用对比永远不成立，导致购物车更新逻辑走不通。
4. ID字段不匹配：Home里用filterItems.id当key，但Card里判断购物车商品用foodItem._id，如果后端返回的是id不是_id，永远找不到已有商品，逻辑全错。
5. Context未被包裹：移除Card复杂逻辑后白屏，肯定是useCart和useDispatchCart这俩自定义hooks的Context没在组件树上层加Provider，直接报错导致页面崩溃。

修复代码及步骤 #

1. 修正Home.js的数组判断 #

把判断数组是否为空的逻辑改成length > 0，同时给循环的外层div加key，避免React警告：

// Home.js 容器部分修改后
<div className='container'> 
  {
    foodCat.length > 0
      ? foodCat.map((data) => {
          return (
            <div className='row mb-3' key={data.id}>
              <div className='fs-3 m-3'>{data.CategoryName}</div>
              <hr id="hr-success" style={{ height: "4px", backgroundImage: "-webkit-linear-gradient(left,rgb(0, 255, 137),rgb(0, 0, 0))" }} />
              {foodItems.length > 0 
                ? foodItems.filter(
                    items => items.CategoryName === data.CategoryName && items.name.toLowerCase().includes(search.toLowerCase())
                  ).map(filterItems => (
                    <div key={filterItems.id} className='col-12 col-md-6 col-lg-3'>
                      <Card 
                        foodName={filterItems.name} 
                        item={filterItems} 
                        options={filterItems.options[0]} 
                        ImgSrc={filterItems.img} 
                      />
                    </div>
                  ))
                : <div>暂无数据</div>}
            </div> 
          )
        }) 
      : <div>加载中...</div>
  }        
</div>

2. 修复Card组件的初始化问题 #

给size设置默认值，同时确保priceRef存在时再赋值：

// Card.js 相关代码修改
const priceOptions = Object.keys(options);
// 给size设置初始值为第一个价格选项
const [size, setSize] = useState(priceOptions[0] || "");

// 修改useEffect
useEffect(() => {
  if (priceRef.current) {
    setSize(priceRef.current.value);
  }
}, []);

3. 修正购物车逻辑的空值判断 #

把food !== []改成判断对象是否有属性（因为找到的food是商品对象）：

// Card.js 中handleAddToCart修改
const handleAddToCart = async () => {
  let food = {}; // 改成对象初始化，避免数组混淆
  for (const item of data) {
    if (item.id === foodItem.id) { // 统一用id字段
      food = item;
      break;
    }
  }
  if (Object.keys(food).length > 0) {
    if (food.size === size) {
      await dispatch({ type: "UPDATE", id: foodItem.id, price: finalPrice, qty: qty })
      return
    } else {
      await dispatch({ type: "ADD", id: foodItem.id, name: foodItem.name, price: finalPrice, qty: qty, size: size, img: props.ImgSrc })
      console.log("规格不同，新增商品到购物车")
      return
    }
  }
  await dispatch({ type: "ADD", id: foodItem.id, name: foodItem.name, price: finalPrice, qty: qty, size: size, img: props.ImgSrc })
}

4. 解决Context白屏问题 #

在项目的根组件（比如App.js）里包裹Cart的Provider：

// App.js 示例
import { CartProvider } from './components/ContextReducer';
import Home from './pages/Home';
import Navbar from './components/Navbar';
import Footer from './components/Footer';

function App() {
  return (
    <CartProvider>
      <Navbar />
      <Home />
      <Footer />
    </CartProvider>
  );
}

export default App;

额外提示 #

• 开发时一定要开浏览器Console，React渲染报错全在这里，是最快定位问题的方式。
• 数据加载时加个“加载中”提示，用户体验更好。
• 可以给Card组件的props加默认值，比如options={props.options || {}}，防止后端返回数据异常导致组件崩溃。

内容的提问来源于stack exchange，提问作者Smarani Basu