代码之家 › 专栏 › 技术社区 › Emm

添加CombineReducer后无法读取未定义(读取“map”)的属性

react-redux redux reactjs javascript

Emm · 技术社区 · 3 年前

我组合了两个reducer函数,一个是返回电影列表,另一个是我正在构建的,用于处理用户将电影添加到“收藏夹列表”的逻辑。

import { combineReducers } from 'redux';
import movieReducer from './movieReducer';
import movieFavReducer from './movieFavReducer';

//combined reducers 
export default combineReducers({ movieReducer, movieFavReducer });

如果我不合并这两个减缩器,只合并movieReducer,我会得到我所有的电影,然而,当我合并这两个减缩器时,我会得到错误消息:

Uncaught TypeError: Cannot read properties of undefined (reading 'map')

以下是相关代码:

import React from 'react';
import { connect } from 'react-redux';
import * as actionCreators from '../actions/movieActions';
import MovieListItem from './MovieListItem';
import MovieFooter from './MovieFooter';

const MovieList = (props)=> {
    const{ movies, favorites } = props
    // const movies = [];

    return (
        <div className="col">
            <table className="table table-striped table-hover">
                <thead>
                <tr>
                    <th>Title</th>
                    <th>Director</th>
                    <th>Genre</th>
                    <th>Metascore</th>
                    <th></th>
                </tr>
                </thead>

                <tbody>
                    {
                        props.movies.map(movie=><MovieListItem key={movie.id} movie={movie}/>)
                    }
                </tbody>
            </table>
            
            <MovieFooter totalMovies={movies.length}/>
        </div>
    );
}

//reaching into state and getting specific properties I want
const mapStateToProps = state => {
    return {
        movies: state.movies,
        favorites: state.movies
    }
}

export default connect(mapStateToProps, actionCreators) (MovieList);

我读过一些解决方案,建议我在映射之前先检查电影中是否包含任何内容,这样就符合了 movies?.map 问题是,这没什么,尽管当我不合并我的减缩器时,电影会被传下来。

请帮我弄清楚

1 回复 | 直到 3 年前

Tércio Garcia 3 年前

当你使用 combineReducers ,它不会合并减速器状态,而是创建一个嵌套了这些状态的新减速器。

通过做 combineReducers({ movieReducer, movieFavReducer }) 你会得到这样的结果:

{
  "movieReducer": {
    "movies": []
  },
  "movieFavReducer": {
    "movies": []
  }
}

也就是说,问题似乎在你的头上 mapStateToProps 实施试试这个:

const mapStateToProps = state => {
    return {
        movies: state.movieReducer.movies,
        favorites: state.movieFavReducer.movies
    }
}

更多关于 组合传感器 在 official docs .

推荐文章

Piotr Chmielowiec · 组件从一个调度发出两个api调用

2 年前

Mistakamikaze · React Redux |在全局Redux状态之前更新本地状态

2 年前

Storm28 · 错误:函数作为子函数无效。如果从渲染返回组件而不是<Component/>,则可能会发生这种情况

2 年前

Stephen Aranda · 如何使用React在前端UI上显示API响应消息?

3 年前

khalil hajri · 无效的钩子调用。钩子只能在函数组件的主体内部调用(react native)

3 年前

ShaySS · 如果我不需要将数据存储在redux存储中,我是否必须使用redux saga从API获取数据?

3 年前

arya.s · Toast错误消息在React/Redux中多次显示。如何避免?

3 年前

jack · 注销后清除redux商店

3 年前

Emm · 添加CombineReducer后无法读取未定义(读取“map”)的属性

3 年前

MariaT · 如何使用bootstrap 4在折叠菜单后面获取徽章?

6 年前