使用React+Redux-Thunk开发电影应用时，API返回数组数据无法在组件中展示求助

Hey there! Let's walk through the issues in your code that are preventing the movie data from showing up properly. I've broken down the key problems and fixed them for you:

1. Missing Action Type Constants #

In your action.js, you're using MOVIE_START, MOVIE_SUCCESS, and MOVIE_ERROR but haven't defined these as constants. This means your reducer won't match any of the action types, so the state never updates.

Fix: Add the constants at the top of action.js:

const MOVIE_START = "MOVIE_START";
const MOVIE_SUCCESS = "MOVIE_SUCCESS";
const MOVIE_ERROR = "MOVIE_ERROR";

import API from "../api/index";
import axios from "axios";

// ... rest of your action code

2. Incorrect Loading State in Reducer #

In the MOVIE_SUCCESS case of your reducer, you set loading: true—this keeps your app stuck in a loading state, so your component might not render the data even after it's fetched.

Fix: Set loading: false when the data loads successfully:

case MOVIE_SUCCESS:
  return {
    ...state,
    movies: action.payload,
    loading: false, // Changed from true to false
    error: "",
  };

3. Wrong Parameter Order in Array.map #

In MainPage.js, you're using props.movies.map((key, data) => ...)—the first parameter is the item from the array, the second is the index. You're trying to access data.title which is actually the index, so it will be undefined.

Fix: Swap the parameters and add a unique key for list items (React requires this):

{props.movies.map((movie, index) => (
  <div key={movie.id || index}>
    <p>{movie.id}</p>
    <p>{movie.title}</p>
  </div>
))}

4. Unnecessary Parameter in mapDispatchToProps #

Your getMovies action creator doesn't take any parameters, but you're passing data to listMovies in mapDispatchToProps. This is harmless but unnecessary.

Fix: Simplify mapDispatchToProps:

const mapDispatchToProps = (dispatch) => ({
  listMovies: () => dispatch(getMovies()), // Removed unused data parameter
});

5. Add Loading/Error Handling in Component #

Right now, if the data is still loading or there's an error, your component might try to render an empty array or throw an error. Add conditional rendering to handle these states:

First, update mapStateToProps to include loading and error states:

const mapStateToProps = (state) => ({
  movies: state.movies,
  loading: state.loading,
  error: state.error,
});

Then update the return statement in MainPage.js:

return (
  <>
    <div>
      {props.loading ? (
        <p>Loading movies...</p>
      ) : props.error ? (
        <p>Error: {props.error.message}</p>
      ) : (
        props.movies.map((movie, index) => (
          <div key={movie.id || index}>
            <p>{movie.id}</p>
            <p>{movie.title}</p>
          </div>
        ))
      )}
    </div>
    <Layout>
      <Header>
        <SearchInput />
      </Header>
      <Content>
        <MovieCard />
      </Content>
    </Layout>
  </>
);

Bonus: Double-Check Your API Structure #

Make sure the API URL returns an array of movie objects with id and title properties. If the data is nested (e.g., under data.results), adjust the dispatch in getMovies:

.then(({ data }) => {
  dispatch(MovieSuccess(data.results)); // Use nested data if needed
})

After making these changes, your app should properly fetch, store, and render the movie data. Check your browser console for any network or syntax errors if issues persist!

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