我在 next.js 中收到此错误：警告：收到的 `children` 属性的 NaN。如果这是预期的，请将值转换为字符串

Question

我正在处理我的第一个 Next.js 项目，并且有一个文件 myCart.js 页面。代码如下：

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}>&larr; 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;

每当呈现页面时，我都会收到以下警告：

警告：收到 children 属性的 NaN。如果这是预期的，请将值转换为字符串。 在 h3 在 div 在 CardBody (webpack-internal:///./node_modules/react-bootstrap/esm/createWithBsPrefix.js:31:27) 在 div 在 Card (webpack-internal:///./node_modules/react-bootstrap/esm/Card.js:44:23) 在 OrderCard (webpack-internal:///./components/OrderCard.js:77:24) 在 div 在 div 在 div 在节 在 div 在 Container (webpack-internal:///./node_modules/react-bootstrap/esm/Container.js:18:23) 在 div 在 div 在 div 在 div 在布局 (webpack-internal:///./components/Layout.js:31:25) 在 div 在 makeGetRequest (webpack-internal:///./pages/myCart.js:75:73) 在 MyApp (webpack-internal:///./pages/_app.js:21:24) 在 ErrorBoundary (webpack-internal:///./node_modules/@next/react-dev-overlay/lib/internal/ErrorBoundary.js:23:47) 在 ReactDevOverlay (webpack-internal:///./node_modules/@next/react-dev-overlay/lib/internal/ReactDevOverlay.js:73:23) 在 Container (webpack-internal:///./node_modules/next/dist/client/index.js:146:5) 在 AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:623:24) 在根目录 (webpack-internal:///./node_modules/next/dist/client/index.js:739:25)

我还在此页面上遇到了另一个错误，如下所示：

警告：列表中的每个孩子都应该有一个唯一的“key”道具。检查makeGetRequest 的渲染方法。请参阅https://reactjs.org/link/warning-keys 了解更多信息。 在 makeGetRequest (webpack-internal:///./pages/myCart.js:75:73) 在 MyApp (webpack-internal:///./pages/_app.js:21:24) 在 ErrorBoundary (webpack-internal:///./node_modules/@next/react-dev-overlay/lib/internal/ErrorBoundary.js:23:47) 在 ReactDevOverlay (webpack-internal:///./node_modules/@next/react-dev-overlay/lib/internal/ReactDevOverlay.js:73:23) 在 Container (webpack-internal:///./node_modules/next/dist/client/index.js:146:5) 在 AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:623:24) 在根目录 (webpack-internal:///./node_modules/next/dist/client/index.js:739:25)

值得注意的是，该项目在带有这些警告的开发模式下运行良好，但在生产模式或部署时却不行。

我从文档中尝试了很多东西，也从 stackoverflow 中对类似问题的其他开发人员的建议中尝试了很多东西。但没有一个工作。我会很感激帮助。谢谢你。问候

Answer 1

我遇到了类似的问题，然后我发现我的浮点数必须转换为字符串，我之前的标签是

${targetCompany.currentPrice}

然后我改成以下解决警告：

${`${targetCompany.currentPrice}`}