使用.map触发TypeError：The Movie Database相关React组件渲染异常

问题分析与解决办法 #

你遇到的情况本质是**genres在组件渲染的某个时刻不是数组**——哪怕它最终会变成数组，但React异步渲染+数据加载的时序问题，会导致初始渲染或请求异常时，genres是undefined/null/对象，这时候调用map就会报错，而请求正常完成后又能恢复，所以出现“偶尔正常”的现象。

下面是具体的排查和解决步骤：

1. 修正初始状态的默认值 #

如果你的genres状态是这样初始化的：

const [genres, setGenres] = useState(); // 初始为undefined
// 或者
const [genres, setGenres] = useState(null);

改成初始为空数组：

const [genres, setGenres] = useState([]);

这样第一次渲染时，genres是合法数组，map不会报错，后续请求完成后再更新成真实数据。

2. 检查TMDB接口的返回结构 #

TMDB获取流派的接口返回通常是外层包了对象的结构：

{
  "genres": [
    {"id": 28, "name": "动作"},
    {"id": 12, "name": "冒险"}
  ]
}

如果你直接把整个响应对象赋值给genres（比如setGenres(response)），那genres就是一个对象，自然不能调用map。必须取response.genres来设置状态：

fetch('https://api.themoviedb.org/3/genre/movie/list?api_key=YOUR_KEY')
  .then(res => res.json())
  .then(data => setGenres(data.genres)) // 取genres字段

另外，网络请求失败时（比如API key错误、网络波动），响应可能是错误对象或undefined，要在catch里兜底：

.catch(err => {
  console.error('获取流派失败:', err);
  setGenres([]); // 兜底设为空数组
});

3. 渲染前做类型校验 #

在调用map之前，先确保genres是数组，避免意外情况：

• 方法一：条件渲染

{Array.isArray(genres) && genres.map(genre => (
  <Chip key={genre.id} label={genre.name} />
))}

• 方法二：空值合并+可选链（更简洁）

{(genres ?? []).map(genre => (
  <Chip key={genre.id} label={genre.name} />
))}

4. 排查是否有代码意外修改了genres类型 #

检查所有调用setGenres的地方，有没有不小心把非数组值传进去的情况，比如：

// 错误示例：把字符串传给了genres
setGenres('动作');

如果不确定，可以加个监听日志，跟踪genres的变化：

useEffect(() => {
  console.log('genres 类型:', typeof genres, '值:', genres);
}, [genres]);

这样就能看到什么时候genres变成了非数组。

5. 用加载状态控制渲染时序 #

如果流派数据是异步加载的，可以加个加载状态，在数据未准备好时不渲染map部分：

const [loading, setLoading] = useState(true);
const [genres, setGenres] = useState([]);

useEffect(() => {
  fetchGenreList()
    .then(data => {
      setGenres(data.genres);
      setLoading(false);
    })
    .catch(() => {
      setLoading(false);
      setGenres([]);
    });
}, []);

// 加载中显示占位符
if (loading) return <CircularProgress />;

return (
  <div className="genre-filter">
    {genres.map(genre => (
      <Chip key={genre.id} label={genre.name} />
    ))}
  </div>
);

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