Node.js Redux状态道具未定义且组件未启动

在我的localhost react节点应用程序中，当我点击

Movies.js

页面时，应用程序将对

{localhost}/api/Movies

节点端点进行api调用（我使用的是

redux thunk

中间件btw）

然后它将返回一个json到

this.props.movies.displayedMovies

（入口点是

componentDidMount（）

），然后将其传递到

render（）

从那时起，唯一的变化是我添加了另一个reducer

MusicReducer

，并使用redux的

combinedReducer（…）

来配置存储

现在，电影页面呈现为空白，因为控制台返回未定义的

的
无法读取属性'displayedMovies'，并且似乎没有调用componentDidMount

不知道问题出在哪里。下面是代码。任何帮助都将不胜感激

Movies.js容器

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router, Route } from 'react-router-dom'

import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import * as moviesActions from '../actions/MoviesActions'

import NavBar from '../components/NavBar'
import ResultsBar from '../components/ResultsBar'
import Grid from '../components/Grid'
import * as utils from '../utils/utils.js'
import style from '../style/App.css'

class Movies extends Component {

  handleSearch(e) {
    this.props.moviesActions.filterMovies(e.target.value)
  }

  componentDidMount() {
    this.props.moviesActions.fetchMovies()
  }

  render() {
    let { displayedMovies } = this.props.movies

    return (
      <div>
      <NavBar onChange={this.handleSearch.bind(this)} type={0}/>
      <br/>
      <ResultsBar count={displayedMovies.length} type={0}/>
      <Grid
          gridData={JSON.stringify(displayedMovies)}
          gridCell_width={140}
          gridCell_height={200}
          type={0}
      />
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    movies: state.movies
  }
}

function mapDispatchToProps(dispatch) {
  return {
    moviesActions: bindActionCreators(moviesActions, dispatch)
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Movies)

MoviesReducer.js reducer

import { combineReducers } from 'redux'
import {
  BOOKS,
  COMICS,
  MOVIES,
  MUSIC,
  PODCASTS,
  TV
} from '../constants/Page'
import moviesReducer from './MoviesReducer'
import musicReducer from './MusicReducer'

export default combineReducers({
  moviesReducer,
  musicReducer
})

import {
  REQUEST_MOVIES,
  RECEIVE_MOVIES,
  FILTER_MOVIES,
  SORT_MOVIES
} from '../constants/Page'

const initialState = {
  movies: [],
  displayedMovies: []
}

export default function movie(state = initialState, action) {
  switch (action.type) {
    case REQUEST_MOVIES:
      return {
        ...state
      }

    case RECEIVE_MOVIES:
      let movies = action.movies
      return {
        ...state,
        movies,
        displayedMovies: movies
      }

    case FILTER_MOVIES:
      let displayedMovies = state.movies.filter(movie => {
        if (movie.title.toLowerCase().includes(action.searchTerm.toLowerCase())) {
          return true
        }
        return false
      })
      return {
        ...state,
        displayedMovies,
        displayedMovies: displayedMovies
      }

    case SORT_MOVIES:
      let sortDisplayedMovies
      switch(action.sortOption) {
        case 'Alphabetical':
          sortDisplayedMovies = state.displayedMovies.sort((a,b)=> {
            var a1 = a.title.toLowerCase();
            var b1 = b.title.toLowerCase();
            return a1<b1 ?-1:a1> b1? 1 :0;
          })
          break;
        case 'Oldest':
          sortDisplayedMovies = state.displayedMovies.sort((a,b)=> {
            return new Date(a.release_date).getTime() - new Date(b.release_date).getTime();
          })
          break;
        case 'Newest':
          sortDisplayedMovies = state.displayedMovies.sort((a,b)=> {
            return new Date(b.release_date).getTime() - new Date(a.release_date).getTime();
          })
          break;
        default:
          break;
      }
      return {
        ...state,
        sortDisplayedMovies,
        displayedMovies: sortDisplayedMovies
      }

    default:
      return state
  }

}

这是您的
mapStateToProps
的问题

因为您已经定义了
组合减速机
，如下所示

export default combineReducers({
  moviesReducer,
  musicReducer
})

这与下面的操作相同

export default combineReducers({
  movieReducer:movieReducer,
  musicReducer:musicReducer
})

您的电影状态在

state.movieReducer.movies

这意味着在
mapStateToProps
中，必须像这样注入正确的值

function mapStateToProps(state) {
  return {
    movies: state.movieReducer.movies
  }
}

state.movieReducer.movies

function mapStateToProps(state) {
  return {
    movies: state.movieReducer.movies
  }
}