JS 组件不会显示在页面上？答案

【问题标题】：JS Component will not display on page?JS 组件不会显示在页面上？
【发布时间】：2021-10-20 20:54:23
【问题描述】：

我的组件不会显示在页面上。没有错误或任何其他警告/消息。我控制台记录了 gameData 的值，所有数据都应如此。这是导出的函数：

export default function AllGameDeals( gameData ){

    const dealArr = new Array()

    const deals = () => {
        gameData.deals.map((deal) => {
            const imageSrc = `https://www.cheapshark.com/img/stores/icons/${(parseInt(deal.storeID)-1)}.png`
            deal.imageSrc = imageSrc
            dealArr.push(deal)
        })
        return dealArr
    }
    deals()

    return (
        <div>
        {dealArr.forEach(gameDeal => (  
          <Box
                key={gameDeal.dealID}
                display={{ md: "flex" }}
                boxShadow="dark-lg"
                p={4}
                >
                <Box flexShrink={0}>
                    <Image borderRadius="lg"
                        width={{ md: 40 }}
                        height={{ md: 20 }}
                        src={gameData.info.thumb}
                        alt={gameData.info.title} />
                </Box>
                <Box>
                    <Image
                        src={gameDeal.imageSrc}
                        alt={gameDeal.storeID} />
                </Box>
                <Box>
                    <Text>{gameDeal.price}</Text>
                    
                </Box>
                </Box>
        ))}
        </div>
        
    )
    
}

我觉得我错过了一些非常明显的东西......

【问题讨论】：

标签： javascript reactjs next.js

【解决方案1】：

尝试从 dealArr.forEach 更改为 dealArr.map。

原因是.forEach什么都不返回，而.map返回一个数组。

【讨论】：

【解决方案2】：

您应该使用.map 而不是.forEach，因为.forEach 实际上并没有返回值

其他可能的改进：

使用useEffect 在组件挂载时获取数据（而不是每次都获取）
使用useState 在组件中“持久化”您的状态

【讨论】：