我有一个简单的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。
在
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. */}
</>
);
};