Gatsby Build卡在任务"Building static HTML for pages"上

Question

我有一个问题，每次我运行我的">gastby build";命令(我运行之前"gastby cleanup ">)，它卡在任务">为页面构建静态HTML";并且没有完成构建。

我的技术堆栈是:

• "gatsby"^ 4.18.0"
• "react"^ 18.1.0"
• "react-dom"^ 18.1.0"
• "theme-ui"^ 0.3.4"
• "@emotion/core":"^ 10.3.1",
• "@emotion/react":"^ 11.9.3",

我确定问题是由我的Header.Menu.jsx中的以下代码引起的:

const NaviList = ({ navKey, wrapperProps, items, items2, ...props }) =>
items ? (
<Flex {...wrapperProps}>
{items.map((menuItem, index) => (
<>
<NaviItem key={`${navKey}-${index}`} {...menuItem} {...props} />
<Box sx={styles.secondUl}>
{items2.map((menuItem2, index2) => (
<NaviItem key={`${navKey}-${index2}`} {...menuItem2} {...props} />
))}
</Box>
</>
))}
</Flex>
) : null

当我取消注释第二个JavaScript地图items2.map()，然后我的gastby构建运行没有问题，并完成构建完全没有卡住。

const NaviList = ({ navKey, wrapperProps, items, items2, ...props }) =>
items ? (
<Flex {...wrapperProps}>
{items.map((menuItem, index) => (
<>
<NaviItem key={`${navKey}-${index}`} {...menuItem} {...props} />
<Box sx={styles.secondUl}>
{/*{items2.map((menuItem2, index2) => (*/}
{/*  <NaviItem key={`${navKey}-${index2}`} {...menuItem2} {...props} />*/}
{/*))}*/}
</Box>
</>
))}
</Flex>
) : null

但是我怎样才能实现我的JSX组件可以使用这些嵌套的JavaScript地图items.map()和items2.map()函数?

Answer 1

似乎items2在编译代码时可能到达null或undefined。尝试添加可选的链接或条件，如:

{items2 && items2.map((menuItem2, index2) => (
<NaviItem key={`${navKey}-${index2}`} {...menuItem2} {...props} />
))}

您还可以避免这种情况通过指定默认值在您的组件,以防他们到达falsy值:

const NaviList = ({ navKey, wrapperProps, items=[], items2=[], ...props }) =>
items ? (
<Flex {...wrapperProps}>
{items.map((menuItem, index) => (
<>
<NaviItem key={`${navKey}-${index}`} {...menuItem} {...props} />
<Box sx={styles.secondUl}>
{items2 && items2.map((menuItem2, index2) => (
<NaviItem key={`${navKey}-${index2}`} {...menuItem2} {...props} />
))}
</Box>
</>
))}
</Flex>
) : null