使用 Redux 从 API 映射数据时出现“Uncaught TypeError: Cannot read property 'results' of undefined”

Question

我正在尝试从 React & Redux 中的 movieDB api 映射数据并收到错误：

Uncaught TypeError: Cannot read property 'results' of undefined

为了更好地理解，这是我的代码。

reducers/moviesReducer.js

const initialState = {
  isFetchingMovies: false,
  isFetchedMovies: false,
  movieList: [],
  fetchingMoviesError: null
}

export const popularMoviesReducer = (state = initialState, action) => {
  switch (action.type) {
    case "FETCHING_POPULAR_MOVIES_START":
      return { ...state, isFetchingMovies: true, fetchingMoviesError: null }
    case "FETCHING_POPULAR_MOVIES_SUCCESS":
      return {
        ...state,
        isFetchingMovies: false,
        isFetchedMovies: true,
        movieList: action.data,
        fetchingMoviesError: null
      }
    case "FETCHING_POPULAR_MOVIES_FAILURE":
      return { ...state, fetchingMoviesError: action.data.error }
    default:
        return state
  }
}

reducers/index.js

import { combineReducers } from "redux"
import { popularMoviesReducer } from "./moviesReducer"

const rootReducer = combineReducers({
  popularMoviesReducer
})

export default rootReducer

actions/index.js

export const fetchPopularMovies = () => {
  return async dispatch => {
    dispatch({ type: "FETCHING_POPULAR_MOVIES_START" })
    try {
      const res = await axios.get(url)
      dispatch({
        type: "FETCHING_POPULAR_MOVIES_SUCCESS",
        data: { popularMovies: res.data }
      })
    } catch (err) {
      dispatch({
        type: "FETCHING_POPULAR_MOVIES_FAILURE",
        error: { error: "Something went wrong" }
      })
    }
  }
}

组件/Popular.js

import React, { Component } from "react"
import { connect } from "react-redux"
import { fetchPopularMovies } from "../actions/index"

class Popular extends Component {

  componentDidMount() {
    this.props.dispatch(fetchPopularMovies())
  }

  render() {
    const { isFetchingMovies, movieList } = this.props

    return isFetchingMovies ? (
      <p>Loading...</p>
    ) 

    :

    (

      <div>
        {
          movieList && movieList.popularMovies.results.map(movie => {
            <p>{movie.title}</p>
          })
        }
      </div>
    )
  }
}

const mapStateToProps = state => {
  return {
    isFetchingMovies: state.popularMoviesReducer.isFetchingMovies,
    movieList: state.popularMoviesReducer.movieList
  }
}

export default connect(mapStateToProps)(Popular)

每当我必须在我的组件中显示一些数据时，我总是会遇到这种问题。我最终需要知道如何摆脱它！

更新：这是 React-Dev-Tools 中 Popular.js 中内容的屏幕截图。 Screenshot

Answer 1

改变你获取电影的方式：

使用 mapDispatchToProps 之类的函数来调度组件的操作：

const mapDispatchToProps = dispatch => ({
 fetch: () => dispatch(youractions.fetchPopularMovies())
})

在你的组件生命周期钩子中：

componentDidMount() {
    this.props.fetch();
  }

connect 调用现在应该如下所示：

export default connect(mapStateToProps, mapDispatchToProps)(Popular)

更新：

您还应该在 map 函数中返回标签，并且还应该使用 key prop（应该是唯一的）。

  <div>
   {
      movieList && movieList.popularMovies.results.map(movie => {
        return <p key={movie.title}>{movie.title}</p>
      })
    }
  </div>

假设标题是唯一的，如果你有 ID，那么你也可以使用它们。

更新 #2：

reducer 中有一个逻辑错误，初始状态中的 isFetchingMovies 应该是 true 而不是 false，因为如果是 false，您将尝试在获取电影之前显示它们。

所以把你的initialState改成这个：

const initialState = {
  isFetchingMovies: true,
  isFetchedMovies: false,
  movieList: [],
  fetchingMoviesError: null
}

请注意，渲染方法是在componentDidMount 之前调用的。您似乎还拥有isFetchedMovies，它在获取电影时会发生变化，您可以在mapStateToProps 中使用该状态并将其用作显示加载或电影的检查。