Next.js调用Twitch接口时map函数控制台有输出但页面无渲染如何解决

问题原因 #

1. 两处TwitchLive.map使用了带大括号的箭头函数语法，但没有手动返回JSX元素，导致map遍历后返回的数组全是undefined，没有内容可渲染。你之前正常工作的User.map、Sk.map用的是圆括号包裹的隐式返回语法，所以可以正常渲染。
2. 代码中引用的tl.description字段不存在于Twitch接口返回的结构中，需要替换为实际存在的tl.title字段。
3. 开头的加载判断if (!Twitch)存在变量名错误，你接收的props中没有名为Twitch的变量。

修正后的核心代码 #

调整加载判断 #

// 替换原有的if (!Twitch)判断
if (!User || !Sk || !TwitchLive) {
  return <div>Loading...</div>;
}

修正第一个TwitchLive.map #

<Box px={4} py={2}>      
{TwitchLive.map((tl) => ( // 把大括号换成圆括号开启隐式返回
  console.log(TwitchLive),
  <div key={tl.id}>
  <a>{tl.user_name}</a>
  <chakra.h1
        color={useColorModeValue("gray.800", "white")}
        fontWeight="bold"
        fontSize="3xl"
        textTransform="uppercase"
    >
        {tl.user_name}
    </chakra.h1>
    <chakra.p
        mt={1}
        fontSize="sm"
        color={useColorModeValue("gray.600", "gray.400")}
    >{tl.title} {/* 替换不存在的description为title */}
        </chakra.p>
        </div>
))}
</Box>

修正第二个TwitchLive.map #

{TwitchLive.map((tl) => ( // 把大括号换成圆括号开启隐式返回
<div key={tl.id}>
<Image
  h={48}
  w="full"
  fit="cover"
  mt={2}
  src={tl.thumbnail_url}
  alt="Twitch live stream thumbnail"
/>

<Flex
  alignItems="center"
  justifyContent="space-between"
  px={4}
  py={2}
  bg="gray.900"
  roundedBottom="lg"
>
  <chakra.h1 color="white" fontWeight="bold" fontSize="lg">
    {tl.viewer_count}
  </chakra.h1>
  <chakra.button
    px={2}
    py={1}
    bg="white"
    fontSize="xs"
    color="gray.900"
    fontWeight="bold"
    rounded="lg"
    textTransform="uppercase"
    _hover={{
      bg: "gray.200",
    }}
    _focus={{
      bg: "gray.400",
    }}
  >
    Add to cart
  </chakra.button>
</Flex>
</div>
))}

如果你习惯用大括号的写法，也可以在大括号内手动添加return语句返回JSX元素，效果完全一致。

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