渲染API数据时排除含NULL属性的对象以解决读取报错问题

要排除含NULL属性的对象并避免报错，你可以在获取数据后先过滤掉不符合要求的条目，再更新状态：

修改数据获取逻辑 #

在fetchData函数里，拿到API返回的data后，添加过滤步骤，只保留所有必要属性都存在的电影条目：

const fetchData = async () => {  
  try {
    const { data } = await axios.get("https://api.tvmaze.com/search/shows?q=all");
    // 过滤掉image为null或rating.average为null的条目
    const validMovies = data.filter(item => {
      return item.show.image && item.show.rating.average !== null;
    });
    setMovies(validMovies);
    console.log(validMovies);
  } catch (err) {
    console.error("数据获取失败:", err); // 建议添加错误日志便于排查
  }
}

额外优化：可选链操作符（可选） #

如果不想完全排除对象，只是避免因NULL属性导致的报错，可以用可选链?.安全访问嵌套属性，示例：

image={item.show.image?.original}
rating={item.show.rating?.average}

但这仅能避免报错，不会过滤对象，根据你的需求，优先选择前面的过滤方案。

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