React组件间state传递异常：InCart状态在RealCart组件中为空

核心问题：RealCart组件的props接收方式错误 #

你的RealCart组件没有正确处理React组件的props参数。React函数组件的第一个参数是包含所有传入props的对象，而非单独的props项。当前写法下，InCart变量实际指向的是整个props对象，你期望的购物车数组是这个对象的InCart属性——这就是控制台打印看似为空的原因（实际打印的是props对象，需访问InCart.InCart才能看到数据，但这不是正确写法）。

修复步骤 #

修改RealCart.jsx的组件定义，解构props对象：

import React from 'react'
import Top from '../Site/Header/Top'
import Navi from '../Site/Header/Navi/Navi'
import Cart from './Components/Cart';
import CartHeader from './Components/CartHeader';

// 解构props对象，正确提取InCart和setInCart
function RealCart({ InCart, setInCart }) {
  console.log(InCart)
  return (
    <div>
      <Top />
      <Navi />
      {/* 记得把InCart传递给Cart组件，否则Cart内也无法获取购物车数据 */}
      <Cart InCart={InCart} setInCart={setInCart} />
      <CartHeader />
    </div>
  )
}

export default RealCart;

额外注意事项 #

1. 页面刷新导致状态丢失：当前InCart状态仅存于App组件的内存中，用户刷新页面后状态会被清空。若需要持久化购物车数据，可结合localStorage实现：

// App.js中修改状态初始化与更新逻辑
const [InCart, setInCart] = useState(() => {
  // 初始化时从localStorage读取历史数据
  const savedCart = localStorage.getItem('inCart');
  return savedCart ? JSON.parse(savedCart) : [];
});

// 封装带持久化的状态更新函数
const updateCart = (newCart) => {
  setInCart(newCart);
  localStorage.setItem('inCart', JSON.stringify(newCart));
};

// 传递时用updateCart代替原setInCart
<RealCart InCart={InCart} setInCart={updateCart}/>
<Site InCart={InCart} setInCart={updateCart} Inproducts={Inproducts} setInproducts={setInproducts}/>

2. 状态管理方式混用：你在Section5Card中同时使用了Redux的dispatch和React的useState管理购物车状态，这会导致状态来源不一致，建议统一使用一种方式（要么全用useState+props传递，要么全用Redux）。

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