使用 ES6 在 React 中的对象内映射数组答案

【问题标题】：Mapping an array inside an object in React with ES6使用 ES6 在 React 中的对象内映射数组
【发布时间】：2016-04-24 17:38:03
【问题描述】：

我正在制作一个 react-feed 应用程序，灵感来自 Michael's tutorial（还有 a video），我在尝试使用 Lodash's _.map 函数将数组内的数组作为道具传递时遇到了一些麻烦。这是我正在映射的信息：

const events = [ 
                {
                    event: 'Gods',
                    venue: 'Asgard',
                    venuePicture: 'picture1.jpg',
                    when: '21:00 27/04/16',
                    genres: ['rock', 'funk'],
                    artists: [
                        {
                            artist: 'Thor',
                            artistPicture: 'thor.jpg'
                        },

                        {
                            artist: 'Loki',
                            artistPicture: 'loki.jpg'
                        }
                    ]

                },

                {
                    event: 'Humans',
                    venue: 'Midgard',
                    venuePicture: 'picture2.jpg',
                    when: '21:00 27/04/16',
                    genres: ['jazz', 'pop'],
                    artists: [
                        {
                            artist: 'Human1',
                            artistPicture: 'human1.jpg'
                        },

                        {
                            artist: 'Human2',
                            artistPicture: 'human2.jpg'
                        }
                    ]

                }


             ];

我像这样传递给组件（这可行）：

renderItems(){
        const props = _.omit(this.props, 'events');

        return _.map(this.props.events, (event, index) => <EventsFeedItem key={index} {...event} {...props}/>);

    }

    render() {
            return (
                <section>
                    {this.renderItems()}
                </section>
            );
        }

这工作得很好，划分每个“事件”对象

然后我尝试像这样解构和映射每个事件的“艺术家：”对象：

renderArtists() {

        const { event, venue, venuePicture, when, genres, artists } = this.props.events;

        const props = _.omit(this.props, 'events');
        return  _.map({artists}, (artist, index) => <ItemArtist key={index} {...artist} {...props}/>);

    }

    render() {
        return (
            <ul>
                {this.renderArtists()}
            </ul>
        );
    }

这是我得到的结果，很接近，但不是我需要的：

我需要进一步分离这些以获得：

{artist: "Thor"} {artistPicture: "thor.jpg"}
{artist: "Loki"} {artistPicture: "loki.jpg"}

等等……

我看到这里有一个模式，我只是不知道如何进一步实现它。当我尝试重复相同的解构然后 _.map 事物时，它会中断。任何人都可以帮我解决这个问题，抱歉这么长的帖子。

【问题讨论】：

There's no such thing as a "JSON Array"
使用_.get怎么样？我认为它会起到作用，你也可以把它上传到 jsbin 或我们可以测试它的好地方吗？

标签： javascript arrays json reactjs lodash

【解决方案1】：

return _(this.props.events).flatMap('artists').map((artist, index)=><ItemArtist key={index} {...artist} {...props}/>).value();

【讨论】：

您的第一条评论（您删除的评论）解决了我的问题 VyvIT，非常感谢！我不敢相信我花了这么多时间却没有注意到：D
没问题，这是从初始事件数组中对艺术家进行平面映射的解决方案。

【解决方案2】：

哦，感谢VyvIT的评论（他删除了他的评论）我发现了问题，它在这里：

const { event, venue, venuePicture, when, genres, artists } = this.props.events;
    _.map({artists}, (artist, index) => <ItemArtist key={index} {...artist} {...props}/>);

“艺术家”不应该被解构（大括号），应该是这样的：

_.map(artists, (artist, index) => <ItemArtist key={index} {...artist} {...props}/>);

非常感谢你们！

【讨论】：