React中调用电影数据库API获取数据时访问primaryImage.url报错求助

错误原因 #

从API返回结果来看，不是所有媒体条目都包含primaryImage字段。当某个条目的primaryImage为undefined时，直接访问media.primaryImage.url就会触发这个报错。

解决方案 #

你可以通过以下几种方式安全处理这个情况：

1. 使用可选链操作符（推荐） #

用?.语法安全访问嵌套属性，当primaryImage不存在时，表达式会返回undefined，不会抛出错误：

<img src={media.primaryImage?.url} alt={media.titleText.text} />

2. 条件判断渲染 #

在渲染图片前先检查primaryImage是否存在，避免无效访问：

{media.primaryImage && (
  <img src={media.primaryImage.url} alt={media.titleText.text} />
)}

3. 添加默认占位图 #

如果没有封面图，显示一张默认图片提升用户体验：

<img 
  src={media.primaryImage?.url || '/assets/default-poster.jpg'} 
  alt={media.titleText.text} 
/>

修改后的完整组件代码 #

const SearchPage = () => {
  const params = useParams();
  const { query } = params;

  const [data, setData] = useState(null);

  const fetchData = () => {
    fetch(`${rapidApiUrl}/search/title/${query}${rapidSearchData}`, rapidApiOptions)
      .then((response) => response.json())
      .then((data) => {
        setData(data.results);
      })
      .catch((err) => console.error(err));
  };

  useEffect(() => {
    fetchData();
  }, [query]);

  return (
    <div>
      {data &&
        data.map((media) => (
          <div key={media.id}>
            {/* 使用可选链安全访问primaryImage.url */}
            <img src={media.primaryImage?.url} alt={media.titleText.text} />
            <p>{media.titleText.text}</p>
            <p>{media.releaseYear.year}</p>
          </div>
        ))}
    </div>
  );
};

export default SearchPage;

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