Vite创建的React应用中Carts组件接收undefined props及重复渲染问题

错误现象 #

向<Carts>组件传递对象列表后，组件报错提示listCart为undefined，无法读取length属性；同时组件被调用4次（开启Strict Mode，预期最多2次），额外调用中props接收失败。

错误信息 #

TypeError: Cannot read properties of undefined (reading 'length')
    at Carts (Carts.jsx:13:16)
    at renderWithHooks (chunk-M324AGAM.js?v=aec0e7ae:11546:26)
    at mountIndeterminateComponent (chunk-M324AGAM.js?v=aec0e7ae:14924:21)
    at beginWork (chunk-M324AGAM.js?v=aec0e7ae:15912:22)
    at HTMLUnknownElement.callCallback2 (chunk-M324AGAM.js?v=aec0e7ae:3672:22)
    at Object.invokeGuardedCallbackDev (chunk-M324AGAM.js?v=aec0e7ae:3697:24)
    at invokeGuardedCallback (chunk-M324AGAM.js?v=aec0e7ae:3731:39)
    at beginWork$1 (chunk-M324AGAM.js?v=aec0e7ae:19763:15)
    at performUnitOfWork (chunk-M324AGAM.js?v=aec0e7ae:19196:20)
    at workLoopSync (chunk-M324AGAM.js?v=aec0e7ae:19135:13)

相关代码 #

Carts.jsx #

const Carts = ({ listCart }) => {
  //below console log is getting printed 4 times
  console.log("inside listCart");
  let topMessage;
  //here the listCart is reaching empty
  if (listCart.length === 0) {
    topMessage = `No Products in Cart`;
  } else {
    topMessage = `Cart Elements`;
  }
  return (
    <Carts>
      <h1>{topMessage}</h1>
      {listCart.map(({ name, description, price, _id }) => (
        <Cart name={name} description={description} price={price} key={_id} />
      ))}
    </Carts>
  );
};
export default Carts;

App.jsx #

function App() {
  const list = [
    {
      name: "Digital Camera",
      description:
        "A digital camera with a 24MP sensor and 4K video recording capabilities.",
      _id: 9,
      price: 600,
    },
  ];
  return (
    <div className="carts">
      <Carts listCart={list} />
    </div>
  );
}

export default App;

观察结果 #

组件内的console.log输出4次，前两次正常（含Strict Mode的纯性检查），后两次调用时listCart为undefined。

问题原因与解决方案 #

核心问题 #

Carts组件的return语句中使用了自身组件<Carts>作为包裹标签，导致无限递归渲染。React会终止过深的递归，但递归过程中创建的组件实例没有传入任何props，因此listCart为undefined，触发读取length的错误。同时递归渲染叠加Strict Mode的双重渲染，导致出现4次打印。

修复步骤 #

1. 替换递归的组件标签：将return中的<Carts>替换为普通HTML容器标签（如<div>）
2. 添加props默认值：解构listCart时设置默认空数组，避免意外undefined导致报错

修改后的Carts.jsx #

const Carts = ({ listCart = [] }) => {
  console.log("inside listCart");
  let topMessage;
  if (listCart.length === 0) {
    topMessage = `No Products in Cart`;
  } else {
    topMessage = `Cart Elements`;
  }
  return (
    <div className="carts-container">
      <h1>{topMessage}</h1>
      {listCart.map(({ name, description, price, _id }) => (
        <Cart name={name} description={description} price={price} key={_id} />
      ))}
    </div>
  );
};
export default Carts;

修复后效果 #

• 递归渲染停止，Strict Mode下组件仅渲染2次
• listCart始终有值（默认空数组），不会再触发TypeError

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