如何正确访问我的新map（）对象作为数组

Question

我有这个数据集，我循环并添加到地图中作为我的redux状态的uploads，可以在我的组件中访问。我的组件只接受一个数组，因为它是dataSource因此需要将我的地图值转换为数组。我收到了一个错误。在记录函数generateUploadsMap时，我得到了未定义。

TypeError: Cannot read property 'values' of undefined
Home.render
./components/home/components/Home.jsx:24
  21 |    render() {
  22 |        const { uploads } = this.props;
  23 |        // convert uploads values to an array
> 24 |        const values = [...uploads.values()];
     | ^  25 | 
  26 |        return (
  27 |            <div style={CARD_CONTAINER}>

reducers.js

import { UPDATE_REACTION, REQUEST_UPLOAD_LIST } from './actionTypes';
import { USER_UPLOADS } from './constants';

const INITIAL_STATE = {
    uploads: new Map(),
};

function generateUploadsMap() {
    const setOfUserUploads = new Map();

    USER_UPLOADS.forEach(userUpload => {
        const { _id } = userUpload;

        setOfUserUploads.set(_id, userUpload);
    });
}
export default (state = { ...INITIAL_STATE }, action) => {
    switch (action.type) {
        case REQUEST_UPLOAD_LIST: {
            const { payload } = action;

            return {
                ...state,
                uploads: generateUploadsMap(payload),
            };
        }
        default:
            return state;
    }
};

Home.js

import React from 'react';
import { Avatar, Card, Icon, List } from 'antd';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';

import { LIST_TEXTS, STYLES } from '../constants';
import * as actions from '../actions';
import { getUploads } from '../selectors';

const { AVATAR, CARD_CONTAINER, CARD_LIST, USER_LIST } = STYLES;
const { INNER, MORE, UPLOAD, VERTICAL } = LIST_TEXTS;

class Home extends React.Component {

    componentDidMount() {
        const { requestUploadList } = this.props.actions;

        requestUploadList();
    }

    render() {
        const { uploads } = this.props;

        const values = [...uploads.values()];

        return (
            <div style={CARD_CONTAINER}>
                <List
                  itemLayout={VERTICAL}
                  dataSource={values}
                  renderItem={item => (
                      <List.Item style={USER_LIST}>
                          <Card                            
                            cover={<img alt={UPLOAD} src={item.image} />}
                            extra={<Icon type={MORE} />}
                            hoverable
                            title={(
                                <a>
                                    <Avatar src={item.image} style={AVATAR} />
                                    {item.user}
                                </a>
)}
                            type={INNER}
                            style={CARD_LIST}
                          >
                              {item.story}
                          </Card>
                      </List.Item>
                  )}
                />
            </div>
        );
    }
}

const mapStateToProps = state => ({
    uploads: getUploads(state),
});

const mapDispatchToProps = dispatch => ({
    actions: bindActionCreators(actions, dispatch),
});

export default connect(mapStateToProps, mapDispatchToProps)(Home);

Answer 1

你没有从你的generateUploadsMap函数返回任何东西：

function generateUploadsMap() {
    const setOfUserUploads = new Map();

    USER_UPLOADS.forEach(userUpload => {
        const { _id } = userUpload;

        setOfUserUploads.set(_id, userUpload);
    });

    return setOfUserUploads;
}

要使用普通对象而不是Map，通常建议将其存储在redux状态：

function generateUploadsMap() {
    return USER_UPLOADS.reduce((uploadsMap, upload) => {
        return { ...uploadsMap, [upload._id]: upload };
    }, {});
}

render() {
    const { uploads } = this.props;

    const values = Object.values(uploads);
    ...
}