Reactjs Can'；t在安装组件时加载模拟数据

我有一个组件，它应该呈现一个模拟项列表。初始值是一个空数组，我希望在组件渲染期间加载模拟数据。但它不能正常工作-

组件中的列表

在我试图通过在控制台中打印来检查它时是空的，但Redux Devtools显示它不是空的。我做错了什么

组成部分

import React, { Component } from 'react';
import TagsBlock from './TagsBlock';
import ActionButton from './ActionButton';
import { connect } from 'react-redux';
import { actionLoadCoctails, actionToggleDetail } from '../actions/actionCreators';

class ResultsCoctails extends Component {
    componentDidMount() {
        this.props.actionLoadCoctails();
    }

    list = this.props.loadCoctails.map(({ img, name, tags}, key) => {
        const showDetail = (e) => {
            e.preventDefault();
            this.props.actionToggleDetail();
        }

        return (
            <div
                className="item"
                key={`coctail-${key}`}
            >
                <a
                    href="#"
                    onClick={(e) => showDetail(e)}
                >
                    <div className="img">
                        <img src={img} alt="error" />
                    </div>
                    <div className="desc">
                        <div className="name">{name}</div>
                        <TagsBlock tags={tags}></TagsBlock>
                    </div>
                </a>
            </div>
        )
    });

    render() {
        return (
            <div className="result-coctails">
                <div className="block">
                    {this.list}
                </div>
                <ActionButton txt="morе"></ActionButton>
            </div>
        )
    }
}

export default connect(state => ({
    loadCoctails: state.loadCoctails
}), { actionLoadCoctails, actionToggleDetail })(ResultsCoctails);

ActionCreator

import {
    LOAD_COCTAILS,
    TOGGLE_DETAIL,
    LOAD_DETAIL
} from '../constants';

export const actionLoadCoctails = () => {
    return {
        type: LOAD_COCTAILS
    }
}

export const actionToggleDetail = () => {
    return {
        type: TOGGLE_DETAIL
    }
};

export const actionLoadDetail = (img, name, tags, deg, txt) => {
    return {
        type: LOAD_DETAIL,
        img,
        name,
        tags,
        deg,
        txt
    }
};

---

问题是

map（）

函数无法处理对象-因此，我们应该制作一个数组并使用它执行

map（）

：

const listArray = Object.values(this.props.loadCoctails);
        const list = listArray.map(({ img, name, tags}, key) => {
        .....

const listArray = Object.values(this.props.loadCoctails);
        const list = listArray.map(({ img, name, tags}, key) => {
        .....