使用YouTube V3 API(RapidAPI)构建YouTube克隆时React组件videoId读取报错

我跟着YouTube上的JavaScript Mastery API课程制作YouTube克隆，但调用API获取视频时出现错误，React应用停止重新渲染。添加代码{item.id.videoId && <VideoCard video={item}/>}后就出现了这个问题。

视频组件代码 #

import {Stack, Box} from '@mui/material';
import {ChannelCard, VideoCard} from './';

const Videos = ({videos}) => {

  return (
    <Stack direction="row" flexWrap="wrap" justifyContent="start" gap={2}  >
        {videos.map((item, idx) => (
            <Box key={idx}>
                {item.id.videoId && <VideoCard video={item}/>}
            </Box>
            
        ))}
    </Stack>
  )
}

export default Videos

错误信息 #

Videos.jsx:9 Uncaught TypeError: Cannot read properties of undefined (reading 'videoId')
    at Videos.jsx:9:1
    at Array.map (<anonymous>)
    at Videos (Videos.jsx:7:1)
    at renderWithHooks (react-dom.development.js:16305:1)
    at mountIndeterminateComponent (react-dom.development.js:20074:1)
    at beginWork (react-dom.development.js:21587:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at beginWork$1 (react-dom.development.js:27451:1

解决方案 #

• 错误根源：你遍历的videos数组里，存在部分item对象没有id属性，直接访问item.id.videoId时，item.id是undefined，无法读取videoId导致报错中断渲染。
• 修复方式：
  1. 使用可选链操作符（推荐）：修改判断条件为item.id?.videoId，如果item.id不存在会直接返回undefined，不会触发错误：

     {item.id?.videoId && <VideoCard video={item}/>}
     

  2. 多层条件判断：先检查item.id是否存在，再判断videoId：

     {item.id && item.id.videoId && <VideoCard video={item}/>}
     

• 额外优化：尽量不要用数组索引idx作为组件的key，如果视频有唯一标识（比如videoId），可以用item.id?.videoId || idx作为key，提升React渲染效率：

  <Box key={item.id?.videoId || idx}>
  

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