Arrays 获得；未捕获类型错误：无法读取属性'；结果'；“未定义”的定义；使用Redux从API映射数据时

我试图在React&Redux中映射来自movieDBapi的数据，并得到错误：

未捕获类型错误：无法读取未定义的属性“结果”

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

reducers/moviesReducer.js

const initialState={
正在拍摄电影：错误，
isFetchedMovies:false，
电影制作人：[]，
fetchingMoviesError:null
}
导出常量popularMoviesReducer=（状态=初始状态，操作）=>{
开关（动作类型）{
案例“获取流行电影”\u开始：
返回{…状态，isFetchingMovies:true，fetchingMoviesError:null}
案例“获取流行电影成功”：
返回{
……国家，
正在拍摄电影：错误，
isFetchedMovies：是的，
电影列表：action.data，
fetchingMoviesError:null
}
案例“获取流行电影失败”：
返回{…状态，fetchingMoviesError:action.data.error}
违约：
返回状态
}
}

减速机/index.js

从“redux”导入{combinereducer}
从“/moviesReducer”导入{popularMoviesReducer}
const rootReducer=combinereducer({
大众传媒
})
导出默认rootReducer

操作/index.js

export const fetchPopularMovies=（）=>{
返回异步调度=>{
分派（{type:“获取流行电影\u开始”}）
试一试{
const res=等待axios.get（url）
派遣({
类型：“获取流行电影成功”，
数据：{popularMovies:res.data}
})
}捕捉（错误）{
派遣({
类型：“获取流行电影失败”，
错误：{error:“出现了问题”}
})
}
}
}

组件/Popular.js

import React，{Component}来自“React”
从“react redux”导入{connect}
从“./actions/index”导入{fetchPopularMovies}
类扩展组件{
componentDidMount（）{
this.props.dispatch（fetchPopularMovies（））
}
render（）{
const{isFetchingMovies，movieList}=this.props
你是在拍电影吗(
加载

) 
:
(
{
movieList&&movieList.popularMovies.results.map（电影=>{
{movie.title}

})
}
)
}
}
常量mapStateToProps=状态=>{
返回{
isFetchingMovies:state.popularMoviesReducer.isFetchingMovies，
电影列表：state.popularMoviesReducer.movieList
}
}
导出默认连接（MapStateTops）（常用）

每当我必须在组件中显示一些数据时，我总是陷入这种问题。我需要知道如何摆脱这个

更新：下面是React Dev Tools中Popular.js的屏幕截图。

---

更改获取电影的方式：

使用mapDispatchToProps之类的函数从组件中分派操作：

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

在组件生命周期挂钩中：

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

连接呼叫现在应该如下所示：

export default connect(mapStateToProps, mapDispatchToProps)(Popular)

更新：

您还应该返回标记内部映射函数，并且还应该使用键道具（应该是唯一的）

---

请注意，在

componentDidMount

之前调用render方法。您似乎还有

isFetchedMovies

在获取电影时会发生更改，您可以在

MapStateTrops

中使用该状态，并将其用作显示加载或电影的检查。

那么，在此处使用

mapDispatchToProps

有什么意义？您可以传递第二个参数（获取分派参数的函数）连接调用。因此它基本上将函数映射到分派操作的道具。阅读我认为这个问题中的问题不是分派，而是从api返回的数组。我正在获取数据，但在组件中正确显示数据时存在一些问题。使用从e API。

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

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