Question

我有一个应呈现模拟项目列表的组件。初始值为一个空数组，我想在组件渲染期间加载模拟数据。但是它不能正常工作-当我尝试通过在控制台中打印来检出该组件时，组件中的list为空，但是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);

减速器

import { LOAD_COCTAILS } from '../constants';

const INIT_COCTAILS = [
    {
        img: 'some url',
        name: 'Cocktail Mary',
        tags: ['one', 'two', 'three'],
    },
    {
        img: 'some url',
        name: 'White Russian',
        tags: ['one', 'two', 'three'],
    },
    {
        img: 'some url',
        name: 'Cocktail Mary',
        tags: ['one', 'two', 'three'],
    },
    {
        img: 'some url',
        name: 'White Russian',
        tags: ['one', 'two', 'three'],
    },
    {
        img: 'some url',
        name: 'Cocktail Mary',
        tags: ['one', 'two', 'three'],
    }
];

export const loadCoctails = (state = [], { type }) => {
    switch(type) {
        case LOAD_COCTAILS:
            return {
                ...state, ...INIT_COCTAILS
            }

        default:
            return state;
    }
}

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
    }
};

Answer 1

问题是map()函数不能与对象一起使用-因此，我们应该创建一个数组并对其进行map()：

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

安装组件时无法加载模拟数据

1 个答案: