我在 next.js 中收到此错误：警告：“children”属性收到 NaN。 如果这是预期的，请将值转换为字符串
[英]I get this error in next.js: Warning: Received NaN for the `children` attribute. If this is expected, cast the value to a string
问题描述
I am working on my first Next.js project and have a file myCart.js page.
我正在处理我的第一个 Next.js 项目，并且有一个文件myCart.js页面。 The code of which is given below:其代码如下：
function orderCard(arr1) {
return (
<>
<div className={styles.item_group} key={arr1._id}>
<OrderCard
id={arr1._id}
item={arr1.itemName}
menu={String(arr1.menuId)}
img={arr1.itemPic}
summary={arr1.summary}
size={String(arr1.itemSize)}
qtty={String(arr1.qtty)}
price={String(arr1.itemPrice)}
/>
</div>
</>
);
}
let noRefresh;
function makeGetRequest() {
noRefresh = 'Please do not refresh';
[arr1, setArr1] = useState(['']);
[customerName, setCustomerName] = useState('');
[customerMail, setCustomerMail] = useState('');
[jwtokenCart, setJjwtokenCart] = useState('');
axios.get('/api/users/myCart').then((resp) => {
if (resp.data.status === 'success') {
setArr1(resp.data.myList);
setCustomerName(resp.data.userName);
setCustomerMail(resp.data.userMail);
setJjwtokenCart(resp.data.jwtoken);
data = resp.data;
} else alert('Something went wrong. Refresh the browser and try again');
});
function handleCheckout(e) {
e.preventDefault();
e.target.textContent = 'Processing...';
}
const arrLen = arr1.length;
const qttyTotal = arr1.reduce(
(totalQtty, arrQty) => totalQtty + arrQty.qtty,
0
);
const amtTotal = arr1.reduce((prev, curr) => {
return prev + curr.qtty * curr.itemPrice;
}, 0);
return (
<div>
<Layout title="My Cart">
<Link href="/">
<a className={styles.toHome}>← Back to home </a>
</Link>
<div className={styles.noRefresh}>{noRefresh}</div>
<div>
<div className={styles['customer-details']}>
<h3 className={styles.cartName}>Cart of {customerName}</h3>
<p className={styles['customer-details']}>{customerMail}</p>
</div>
<Container className={styles.container}>
<section className={styles.section_cartList}>
{/* <div className={styles.row0}> */}
<div className={`${styles['col_1_of_2']} ${styles['col-1']}`}>
<div className={`${styles['grid']} ${styles['menu-item']}`}>
{arr1.map(orderCard)}
</div>
</div>
<div className={`${styles['col_1_of_2']} ${styles['col-2']}`}>
<div className={styles.heading}>
<h2
className={styles.heading_secondary}
id={styles.heading_secondary}
>
SUMMARY
</h2>
<h3 className={styles.itemsTotalP}>No. of items</h3>
<h3 className={styles.itemsTotal}>{arrLen}</h3>
<h3 className={styles.qttyTotalP}>No. of dishes</h3>
<h3 className={styles.qttyTotal}>{qttyTotal}</h3>
<h3 className={styles.amtTotalP}>Total amount (US$):</h3>
<h3 className={styles.amtTotal}>{amtTotal}</h3>
</div>
<button
className={`${styles['label']} ${styles['btnCart']}`}
type="button"
onClick={handleCheckout}
>
CHECKOUT
</button>
</div>
</section>
</Container>
</div>
</Layout>
</div>
);
}
export default makeGetRequest;
export { jwtokenCart, customerName };
<OrderCard
let cartId;
function OrderCard(props) {
const removeFromCart = async (e) => {
e.preventDefault();
e.target.textContent = 'Processing...';
cartId = props.id;
if (cartId) {
await axios.delete('/api/cart/' + cartId).then((res) => {
if (res.data.status === 'success') {
setTimeout(() => {
Router.reload();
}, 1000);
} else {
e.target.textContent = 'ERROR: Please try again';
setTimeout(() => {
e.target.textContent = 'REMOVE';
}, 2000);
}
});
}
};
return (
<>
<Card className={styles.card}>
<Card.Title className={styles.dish_title}>
<h3 className={styles.itemName} value={props.item}>
{props.item}
</h3>
<p className={styles.menuId} value={props.menu}>
MenuId: {props.menu}
</p>
</Card.Title>
<Card.Img
variant="top"
className={styles.dish_photo}
value={props.img}
src={props.img}
/>
<Card.Body className={styles.card_body}>
<p className={styles.summary} value={props.summary}>
{props.summary}
</p>
<h4 className={styles.dishSizeP}>Dish size (oz) :</h4>
<h4 className={styles.dishSize} value={props.size}>
{props.size}
</h4>
<h4 className={styles.dishQtyP}>Quantity :</h4>
<h4 className={styles.dishQty} value={props.qtty}>
{props.qtty}
</h4>
<h4 className={styles.dishPriceP}>Unit Price (US$) :</h4>
<h4 className={styles.dishPrice} value={props.price}>
{props.price}
</h4>
<hr className={styles.rule} />
<h3 className={styles.subTotalP}>Sub Total (US$)</h3>
<h3 className={styles.subTotal}>{props.qtty * props.price}</h3>
<button
className={`${styles['label']} ${styles['btnCart']}`}
type="button"
onClick={removeFromCart}
>
REMOVE
</button>
</Card.Body>
</Card>
</>
);
}
export default OrderCard;
Whenever the page is rendered I get following warning:每当呈现页面时，我都会收到以下警告：
Warning: Received NaN for the
childrenattribute.children属性的 NaN。 If this is expected, cast the value to a string.
I also get one more error on this page which is given below:我还在此页面上遇到了另一个错误，如下所示：
Warning: Each child in a list should have a unique "key" prop.
makeGetRequest.makeGetRequest的渲染方法。 See https://reactjs.org/link/warning-keys for more information.
It is pertinent to note that the project works fine in dev mode with these warnings, but not in prod mode or on deployment.需要注意的是，该项目在带有这些警告的开发模式下工作正常，但在生产模式或部署时却不行。
I tried lot of stuffs from documentation and also from suggestions to other developers in stackoverflow on similar issues.我从文档中尝试了很多东西，也从 stackoverflow 中对类似问题的其他开发人员的建议中尝试了很多东西。 But none is working.但没有一个工作。 I will appreciate help.我会很感激帮助。 Thank you.谢谢你。 Regards问候
1 个解决方案
解决方案1
0 2022-01-21 01:31:24
I had the similar issue then I found my it was the float must be casted to string, my previous tag was我遇到了类似的问题，然后我发现我的浮点数必须转换为字符串，我以前的标签是
${targetCompany.currentPrice} 然后我改成以下解决警告：${`${targetCompany.currentPrice}`}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.