如何使用映射函数仅返回数组中的一项答案

【问题标题】：How to return only 1 item in an array in react using map function如何使用映射函数仅返回数组中的一项
【发布时间】：2016-01-13 11:08:23
【问题描述】：

当前，当用户单击特定主题时，它会返回数组中的所有项目。但是，我想传递密钥并仅返回映射函数中对象内的特定项目。我尝试将索引作为参数传递，但它似乎不起作用。

var topicPages = [
    { 
        topic_no: '1',
        topic_page_no: '1',
        headline: 'Topic 1 headline', 
        description: 'Topic 1 description comes here...', 
        first_topic_page: true,
        last_topic_page: false
    },
    { 
        topic_no: '2',
        topic_page_no: '2',
        headline: 'Topic 2 headline', 
        description: 'Topic 2 description comes here...', 
        first_topic_page: false,
        last_topic_page: false
    },
    { 
        topic_no: '3',
        topic_page_no: '3',
        headline: 'Topic 3 headline', 
        description: 'Topic 3 description comes here...', 
        first_topic_page: false,
        last_topic_page: false
    },
    { 
        topic_no: '4',
        topic_page_no: '4',
        headline: 'Topic 4 headline', 
        description: 'Topic 4 description comes here...', 
        first_topic_page: false,
        last_topic_page: true
    }
];

var SelectedTopicPage = React.createClass({

    render: function() {
        return (
            <div>
                {this.props.topicPages.map(function (topicPage) {
                    return (
                        <SelectedTopicPageMarkup headline={topicPage.headline} key={topicPage.topic_no}>
                            {topicPage.description}
                        </SelectedTopicPageMarkup> 
                    );
                })}
            </div>
        );
    }
});


var SelectedTopicPageMarkup = React.createClass({

    render: function() {    
        return (
            <div className="topics-page">
                <h1>{this.props.headline}</h1>
                <p>{this.props.children}</p>
            </div>
        );
    }
});

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

最好使用find，但并非所有浏览器都支持。使用reduce 而不是map：

var SelectedTopicPage = React.createClass({

    render: function() {
        var selectedId = this.props.selectedId; // id what you need to find
        var topicPage = this.props.topicPages.reduce(function(topic, current) {
            return topic.topic_no == selectedId ? current : topic;
        }, undefined);

        return (
            <SelectedTopicPageMarkup headline={topicPage.headline} key={topicPage.topic_no}>
                {topicPage.description}
            </SelectedTopicPageMarkup>
        );
    }
});

【讨论】：

为什么是.reduce？而不是.filter?
.filter 将返回一个数组，因此您需要获取数组的第一个元素，在我看来.reduce 如果find 不可用会更简单
但问题是[如何只返回数组中的一项] 所以我想他需要一个包含一个元素的数组。无论如何感谢您的解释

【解决方案2】：

我相信你已经找到了你要找的东西，但是，我看到了这个问题，但仍然没有答案。

您只需要在映射外部定义一个变量，在映射时，放置一个 if 条件来查找您要查找的内容，然后将结果与外部变量相等。

喜欢，

    let tmpItem;
    this.state.newOrder.map((mapItem) => {
        if (mapItem.id == "99") {
            console.log(mapItem)
            tmpItem = mapItem;
        }
    });

【讨论】：