React父组件传值后props仍无法生效？解构undefined问题排查

问题场景 #

我正在为奥丁项目（免费JavaScript在线课程）开发React模拟购物车，技术栈为Vite+React-Router+Vitest。路由结构以App为根组件，通过Outlet渲染子组件Landing；App组件包含Header组件，Header接收items和sum两个Props，且已声明defaultProps设置默认值。但无论通过父组件传值、组件解构时设默认值还是defaultProps，只要同时传递items和sum就完全不生效，删除sum后items能正常获取值。

相关代码 #

路由配置：

import { createBrowserRouter } from 'react-router-dom';
import App from '../App';
import Landing from '../components/Landing';

const router = createBrowserRouter([
  {
    path: '/',
    element: <App />,
    children: [
      {
        path: '/landing',
        element: <Landing />,
      },
    ],
  },
]);

export default router;

App组件：

import './App.scss';
import Header from './components/Header';
import { Outlet } from 'react-router-dom';

function App() {
  return (
    <>
      <Header
        items={3}
        sum={151}
      />
      <Outlet />
    </>
  );
}

export default App;

Header组件：

import styles from '../Header.module.scss';
import PropTypes from 'prop-types';

const Header = ({ items, sum }) => {
  console.log(items);
  return (
    <header className={styles.header}>
      <div className="noto-serif">L`Usine</div>
      <div>
        <button>Home</button>
        <button>Shop</button>
      </div>
      <div className={styles['cart-container']}>
        <p>{items} Items</p>
        <p>{sum} euros</p>
        <img
          src="src/assets/cart.svg"
          alt="Cart"
        ></img>
        <button>Go to checkout</button>
      </div>
    </header>
  );
};

Header.propTypes = {
  items: PropTypes.number,
  sum: PropTypes.number,
};

Header.defaultProps = {
  items: 3,
  sum: 72.57,
};

export default Header;

问题分析与解决方案 #

核心问题 #

从代码和现象判断，问题出在Header组件内的图片资源路径错误：Vite不支持直接使用src/assets/cart.svg这种相对路径加载资源，会导致资源加载失败（控制台会出现404报错），进而中断组件渲染流程，让你误以为Props未生效。

修复方案 #

方案1：导入资源（推荐）

通过ES模块导入资源，Vite会自动处理资源路径：

import styles from '../Header.module.scss';
import PropTypes from 'prop-types';
import cartIcon from '../assets/cart.svg'; // 导入图标资源

const Header = ({ items, sum }) => {
  console.log(items, sum); // 打印确认Props接收情况
  return (
    <header className={styles.header}>
      <div className="noto-serif">L`Usine</div>
      <div>
        <button>Home</button>
        <button>Shop</button>
      </div>
      <div className={styles['cart-container']}>
        <p>{items} Items</p>
        <p>{sum} euros</p>
        <img
          src={cartIcon} // 使用导入的资源变量
          alt="Cart"
        />
        <button>Go to checkout</button>
      </div>
    </header>
  );
};

// 其余代码保持不变

方案2：使用public目录资源

将cart.svg移动到项目根目录的public文件夹下，使用绝对路径引用：

<img
  src="/cart.svg"
  alt="Cart"
/>

验证步骤 #

1. 在Header组件开头添加console.log(items, sum)，确认Props是否真的未接收；
2. 查看浏览器控制台，确认是否有资源加载404报错；
3. 暂时注释img标签，测试Props是否正常显示，验证是否为图片路径导致的渲染中断。

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