在尝试加载从外部 API 拉取的产品信息并呈现的页面时，如果出现上述错误，则仅在生产环境中发生错误，本地一切正常。检查控制台时，我得到了这个错误：
"Next Build" 可以正常工作并生成生产环境的构建版本。 "Next Start" 也能正常工作，并且控制台或其他地方都没有抛出错误。只有在推送到生产环境后才会出现错误。对于发生的情况感到困惑。以下是呈现产品列表的组件代码：
使用上述组件的页面：
TypeError: undefined is not a function (near '...n.map...')
"Next Build" 可以正常工作并生成生产环境的构建版本。 "Next Start" 也能正常工作，并且控制台或其他地方都没有抛出错误。只有在推送到生产环境后才会出现错误。对于发生的情况感到困惑。以下是呈现产品列表的组件代码：
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;
products没有.map函数，这意味着你在生产环境中设置的内容不是一个数组。也许在生产环境中，你的请求被远程服务器阻止或以与本地不同的方式更改。检查设置products时的数据类型，以便进行观察。你可以在那段代码中设置断点、记录日志等。如果它不是一个数组，你真的不应该设置那个状态，并且像 (typeof products != "undefined" && products != null) 这样的检查似乎是多余的，如果你在设置无效状态之前进行了类型检查。 - Yuji 'Tomita' Tomita