Javascript 如何使用map函数在react中仅返回数组中的1项

当前，当用户单击特定主题时，它将返回数组中的所有项目。但是，我希望传递键，并在map函数中仅返回对象中的特定项。我试图通过索引作为一个参数，但它似乎不起作用

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

var-topicPages=[
{ 
主题编号：“1”，
主题第页第1页，
标题：“主题1标题”，
描述：'主题1描述在此…'，
第一页主题：正确，
最后一页主题：false
},
{ 
主题编号：“2”，
主题第页第2页，
标题：“主题2标题”，
描述：'主题2描述在此…'，
第一个主题页面：false，
最后一页主题：false
},
{ 
主题编号：“3”，
主题第页第3页，
标题：“主题3标题”，
描述：'主题3描述在此…'，
第一个主题页面：false，
最后一页主题：false
},
{ 
主题编号：“4”，
主题第页第4页，
标题：“主题4标题”，
描述：'主题4描述在此…'，
第一个主题页面：false，
最后一页主题：真
}
];
var SelectedTopicPage=React.createClass({
render:function（）{
返回(
{this.props.topicPages.map（函数（topicPages））{
返回(
{topicPage.description}
);
})}
);
}
});
var SelectedTopicPageMarkup=React.createClass({
render:function（）{
返回(
{this.props.headline}
{this.props.children}

);
}
});

最好使用

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

var SelectedTopicPage=React.createClass({
render:function（）{
var selectedId=this.props.selectedId；//标识需要查找的内容
var topicPage=this.props.topicPages.reduce（函数（主题，当前）{
return topic.topic\u no==selectedId？当前：主题；
}，未定义）；
返回(
{topicPage.description}
);
}
});

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

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

像

---

为什么

.reduce

？而不是

.filter

？

.filter

将返回一个数组，因此您需要获取数组的第一个元素，在我看来

。如果
find
不可用，则reduce

要简单得多，但问题是[如何在数组中仅返回一项]，因此我认为他需要一个包含一个元素的数组。无论如何，谢谢你的解释

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