React 组件接收未定义的 props

Question

我有一个简单的React应用程序（用vite创建），我将一个对象列表传递给组件Carts，Carts组件简单地解析列表并返回JSX。 但是有一个错误指出传递给 Carts 组件的列表没有到达，它到达时未定义，而且我注意到 Carts 被多次调用，（我处于严格模式，但我相信即使在严格模式下它仅被调用 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;

应用程序.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;

我的观察： 如果我在 Carts 组件中打印一些东西，它会打印 4 次，一次可以，第二次由 React 调用来检查纯度，这也很好，但它又被调用两次并收到未定义的 listCart。

Answer 1

在

Carts

组件返回的 JSX 模板中，您可以在没有 props 的情况下对其自身进行递归调用：

const Carts = ({ listCart }) => {
  // etc.
  return (
    <Carts> {/* Recursive call without props */}
      <h1>{topMessage}</h1>
      {/* etc. */}
    </Carts>
  );
};

这很可能是您额外拨打 2 个电话的原因。

您可能想使用 React Fragment 来代替，例如使用菱形符号：

const Carts = ({ listCart }) => {
  // etc.
  return (
    <> {/* Or <React.Fragment> */}
      <h1>{topMessage}</h1>
      {/* etc. */}
    </>
  );
};