React-Redux v7.2.6中筛选推荐影片时出现Uncaught TypeError错误的问题排查与修改建议

Hey there! Let's figure out why you're getting that Uncaught TypeError: Cannot read properties of undefined (reading 'filter') when filtering your recommended movies with React-Redux v7.2.6. This error almost always means you're trying to call the filter() method on a value that's undefined—let's break down the most common causes and fixes:

1. Your Redux state's initial value isn't set to an empty array #

If your reducer's initial state has recommendedMovies (or whatever key you're using for your movie list) set to undefined instead of [], the first time your component renders, it'll try to call filter() on undefined and throw the error.

Fix: Make sure your reducer initializes the movie list as an empty array:

// In your movies reducer
const initialState = {
  recommendedMovies: [], // Critical: start with an empty array, not undefined
  loading: false,
  error: null
};

const moviesReducer = (state = initialState, action) => {
  // ...your reducer logic here
};

2. You're accessing the wrong path in your Redux state #

Double-check the path you're using in useSelector (or connect if you're using class components). If your store is structured with nested slices—like { movies: { recommendedMovies: [] } }—but you're trying to grab state.recommendedMovies directly, you'll get undefined.

Fix: Match the exact structure of your Redux store:

// Correct path example
const recommendedMovies = useSelector(state => state.movies.recommendedMovies);

3. You're trying to filter before async data loads #

If you're fetching your recommended movies via an async action (like an API call), your component will render at least once before the data comes back. If your initial state wasn't set to an empty array, or you don't handle the loading state, you'll hit this error.

Fixes:

• Use the optional chaining operator (?.) to safely call filter() only if the array exists:

  const filteredMovies = recommendedMovies?.filter(movie => movie.genre === "drama");
  

• Add a loading state check before rendering/filtering:

  const { recommendedMovies, loading } = useSelector(state => state.movies);
  
  if (loading) return <div>Loading recommended movies...</div>;
  
  const filteredMovies = recommendedMovies.filter(movie => movie.genre === "drama");
  

Quick Example of a Fixed Component #

Here's how a working component might look, combining all these fixes:

import { useSelector } from "react-redux";

const RecommendedMovieFilter = () => {
  const { recommendedMovies, loading } = useSelector(state => state.movies);

  // Safely filter with optional chaining
  const filteredActionMovies = recommendedMovies?.filter(
    movie => movie.genre === "action"
  );

  if (loading) return <p>Loading...</p>;

  return (
    <div className="movie-list">
      {filteredActionMovies?.map(movie => (
        <div key={movie.id} className="movie-card">
          <h3>{movie.title}</h3>
        </div>
      ))}
    </div>
  );
};

export default RecommendedMovieFilter;

Start by checking your reducer's initial state first—that's the most common culprit here. If that's not it, verify your state path in useSelector, then make sure you're handling the async loading state properly.

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