Next.js 应用程序错误：发生客户端异常（有关更多信息，请参阅浏览器控制台）

Question

尝试加载呈现从外部 API 提取的产品信息的页面时看到上述错误。错误仅发生在生产环境中，本地一切运行正常。检查控制台时出现此错误：

TypeError: undefined is not a function (near '...n.map...')

“Next Build”工作正常并构建了生产版本。“下一步开始”也运行良好，并且控制台或其他任何地方都没有抛出错误。仅当我推送到生产环境后才会出现错误。很困惑到底发生了什么。我的代码如下：

呈现产品列表的组件：

import type { NextPage } from 'next'
import React, { useState, useEffect, useContext} from 'react';
import styles from '../styles/Home.module.css'
import DepopIcon from './icons/depop.svg'
import { Image, Main, Heading, Paragraph, Nav, Icons, Header, Grommet, Box, Button, Grid, Text, Footer, Anchor } from 'grommet';
import {
  Instagram,
  Shop,
  Cart
} from 'grommet-icons';
import { useRouter } from 'next/router';

export default function ProductsList() {
    const router = useRouter();
    // load our products state variable
    const [products, setProducts] = useState([]);
    const [prodImg, setProdImg] = useState([]);


    function handleProdClick(id){
        router.push({ pathname: "/product", query: { id: id } })
    }

    const getProducts = async () => {
         const response = await fetch("/api/getproducts");
         var data = await response.json();
         data = JSON.parse(data);
         await setProducts(data);
    }

    useEffect(() => {
            getProducts();
        }, [])
    //

    // build areas list for our grid
    const areaVar = "area";
    const cols = 3;
    var r = 0;
    var c = 0;
    var areas = []
    for (let x = 1; x < products.length+1; x++){
        const name = areaVar+x.toString()
        areas.push({ name: name, start: [r,c], end: [r,c]  })
        r += 1
        if (x % 3 == 0){
            r = 0
            c += 1
        }
    }
    //

    console.log(products);

    // create our product objects for our grid
    var productObjs = [];
    if (typeof products != "undefined" && products != null){
        productObjs = products.map((product, index) => {
            return(
            <Box
              key={product._id}
              gridArea= {areas[index].name}
              background="#003311"
              direction="column"
              pad="none"
              align="center"
              onClick={() => {handleProdClick(product._id)}}
            >
                <Image
                  src={product.frontImage} fill={true} fit="cover"
                  onMouseOver={e => (e.currentTarget.src = product.backImage)}
                  onMouseOut={e => (e.currentTarget.src = product.frontImage)}
                />
                <Box
                  direction="row"
                  pad="xsmall"
                  align="center"
                  gap="large"
                  justify="between"
                  animation="fadeIn"
                >
                  <Text color="#fff" size="medium">{product.name}</Text>
                  <Text color="#fff" size="medium">{product.color}</Text>
                  <Text color="#fff" size="medium">{product.price} USD</Text>
                  <Text color="#fff" size="medium">{product.size}</Text>
                </Box>
           </Box>
            );
        });
    }

    //
    const rows = []
    for (let i = 0; i < r; i++){
        rows.push('large')
    }
    return (
        <Grid
          rows={rows}
          columns={['flex', 'flex', 'flex']}
          gap="none"
          areas={areas}
        >
          {productObjs}
        </Grid>
    );
}

使用上述组件的页面：

import type { NextPage } from 'next'
import React, { useState, useContext, useEffect} from 'react';
import { Paragraph, Main, Nav, Icons, Header, Grommet, Box, Button, Grid, Text, Footer, Anchor } from 'grommet';
import ContactHeaderUnit from '../components/ContactHeaderUnit.tsx'
import FooterUnit from '../components/FooterUnit.tsx'
import ProductsList from '../components/ProductsList.tsx'

const Shop: NextPage = () => {

      return (
          <Grommet
              full={true}
              background="#fffced"
              theme={{
                  global: { font: {
                              family: "Alice"
                            }},
                paragraph: {
                    font: {
                      family: 'Arial',
                    },
                },
                label: {
                    font: {
                      family: 'Arial',
                    },
                  },
              }}
          >
            <ContactHeaderUnit/>
            <ProductsList/>
            <FooterUnit/>
          </Grommet>
      )
}

export default Shop;

Answer 1

我遇到了这个错误，尽管我在构建时没有遇到错误，但花了几天时间才弄清楚是非常困难的。事实证明，我的一些传入数据被渲染成一些无效的 html（动态创建的脚本标签出了问题）。我能够通过反复试验来解决此错误，删除传入数据的不同部分并查看我的页面是否会呈现。如果我必须再做一次，我会从那里开始。