JS组件未在页面渲染且无报错警告，应如何排查解决？

问题根因&修复方案 #

• 核心问题是你在JSX中使用了forEach遍历数组：forEach方法执行后无返回值，因此你写的渲染逻辑等于没有返回任何DOM节点，自然页面什么都不显示，需要替换为map方法。
• 其次你接收组件参数的方式错误：React函数组件的第一个入参是整个props对象，你当前写法是把整个props赋值给了gameData变量，无法正确拿到你传入的gameData属性，需要做解构处理。
• 额外冗余问题：你当前写的deals函数、外部dealArr数组都是不必要的逻辑，同时直接修改传入的deal对象属于变更props的违规操作，不符合React不可变数据原则。

修正后的完整代码 #

export default function AllGameDeals({ gameData }) {
  // 直接在map里处理数据，不需要额外遍历+修改原对象
  return (
    <div>
      {gameData.deals.map((deal) => {
        const imageSrc = `https://www.cheapshark.com/img/stores/icons/${parseInt(deal.storeID) - 1}.png`
        // 每次返回处理后的JSX即可
        return (
          <Box
            key={deal.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={imageSrc}
                alt={deal.storeID} 
              />
            </Box>
            <Box>
              <Text>{deal.price}</Text>
            </Box>
          </Box>
        )
      })}
    </div>
  )
}

内容的提问来源于stack exchange，提问作者Sean