![](/img/trans.png)
[英]Next js: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined
[英]Next Js Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined
完整錯誤:錯誤:元素類型無效:需要一個字符串(對於內置組件)或一個類/函數(對於復合組件)但得到:未定義。 您可能忘記從定義它的文件中導出您的組件,或者您可能混淆了默認導入和命名導入。
試圖將一個組件導入到我的 Nextjs 頁面中,但出現了上述錯誤。 當我將組件中的所有代碼放入我的頁面時,它呈現得非常好,但是當我導入它時出現錯誤。
下面是主頁面代碼:
export default function DealsList({data}){
const { toggleColorMode } = useColorMode();
return (<>
<Button onClick={toggleColorMode}><SunIcon /></Button>
<Box w={500} p={4} m="20px auto">
<Heading as="h1" size="xl" textAlign="center">
Welcome to Stealz
</Heading>
<Heading as="h2" size="l" textAlign="center" m={5}>
Games on Sale
</Heading>
</Box>
{data.map((deal) => (
<div key={deal.dealID}>
<Center>
<Box width="lg"
borderWidth="1px"
_hover={{ bgGradient: "linear(to-r, gray.300, yellow.400, pink.200)" }}
mb="2"
p={4}
rounded="lg"
overflow="hidden"
shadow="1px 1px 3px rgba(0,0,0,0.3)"
>
<Box
mt="1"
ml = "2"
mr = "2"
p={3}
fontWeight="semibold"
as="h4"
lineHeight="tight"
isTruncated
textAlign="center"
>
<Heading size="l">{deal.title}</Heading>
</Box>
<Center><Image src={deal.thumb} alt={deal.title} /></Center>
<Center><Box p="6" textAlign="center">
<Box d="flex" alignItems="baseline">
<Badge borderRadius="full" px="2" colorScheme="teal">
Sale Price: ${deal.salePrice}
</Badge>
<Box
color="gray.500"
fontWeight="semibold"
letterSpacing="wide"
fontSize="xs"
textTransform="uppercase"
ml="2"
>
• Normal Price: ${deal.normalPrice}
</Box>
</Box>
<LinkBoxModal />
</Box>
</Center>
</Box>
</Center>
</div>
))}
</>
)
}
export async function getStaticProps(){
try{
const res = await axios.get('sadfasdfasdf')
const data = res.data
console.log(data)
return { props: { data }}
}
catch(err){
console.log(err)
}
}
這是我要導入的組件:
export default function LinkBoxModal(){
return (
<Popover>
<PopoverTrigger>
<Button>Get it Now!</Button>
</PopoverTrigger>
<PopoverContent>
<PopoverArrow />
<PopoverCloseButton />
<PopoverHeader>Link to Game:</PopoverHeader>
<PopoverBody>[Insert Link]</PopoverBody>
</PopoverContent>
</Popover>
)
}
不知道為什么這不能正確呈現。
我之前遇到過這個問題,我在每個組件上都導入了 react 模塊,它的工作原理就像魔術一樣!!
import React from 'react';
同樣的錯誤,但我的問題是關於導入。 在組件文件夾中,我有 Header.jsx 和 Layout.jsx。
import Header from "./"
我改為:
import Header from "./Header"
有用
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.