Redux状态未更新：生成电影数组时genres为空的问题排查

核心原因是**fetchMovies在getGenres完成前就执行了**，导致从Redux state中获取的genres是空数组，后续匹配类型名称自然失败。虽然你已经成功获取了全量genres数据，但异步操作的执行顺序没控制好，电影数据请求先于类型数据完成。

方案1：在fetchMovies内部确保genres已加载 #

修改fetchMovies逻辑，先检查genres是否加载完成，未完成则先触发getGenres并等待其完成，再继续获取电影数据：

export const fetchMovies = createAsyncThunk(
  "netflix/trending",
  async ({ type }, thunkAPI) => {
    let { netflix: { genres, genresLoaded } } = thunkAPI.getState();
    
    // 若genres未加载，先调用getGenres并等待完成
    if (!genresLoaded) {
      await thunkAPI.dispatch(getGenres()).unwrap();
      // 更新genres为最新状态
      genres = thunkAPI.getState().netflix.genres;
    }
    
    return rawData(
      `${TMBD_BASE_URL}/trending/${type}/week?api_key=${API_KEY}`,
      genres,
      true
    );
  }
);

方案2：组件层面控制执行顺序 #

在使用电影数据的组件中，先触发getGenres，等genresLoaded状态变为true后，再触发fetchMovies：

import { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { getGenres, fetchMovies } from './your-slice-path';

function MovieList() {
  const dispatch = useDispatch();
  const { genresLoaded } = useSelector(state => state.netflix);

  // 首次加载时获取genres
  useEffect(() => {
    dispatch(getGenres());
  }, [dispatch]);

  // 等genres加载完成后，再获取电影数据
  useEffect(() => {
    if (genresLoaded) {
      dispatch(fetchMovies({ type: 'movie' }));
    }
  }, [dispatch, genresLoaded]);

  // 渲染电影列表...
}

额外的安全校验 #

为避免movie.genre_ids不存在导致的报错，在createArrayfromRawdata中添加判断逻辑：

const createArrayfromRawdata = (array, moviesArray, genres) => {
  array.forEach((movie) => {
    const movieGenres = [];
    // 确保genre_ids是有效数组
    if (Array.isArray(movie.genre_ids)) {
      movie.genre_ids.forEach((genre) => {
        const matchedGenre = genres.find(({ id }) => id === genre);
        if (matchedGenre) movieGenres.push(matchedGenre.name);
      });
    }
    if (movie.backdrop_path)
      moviesArray.push({
        id: movie.id,
        name: movie?.original_name ?? movie.original_title,
        image: movie.backdrop_path,
        genres: movieGenres.slice(0, 3),
      });
  });
};

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