Reactjs 如何在react中显示数组中的特定对象？

我得到一个API响应，我可以显示响应中的所有20个结果和所有20个描述。我想按索引显示它们，并且它们已经在响应中被索引。我不知道如何在文章数组中选择对象并显示特定的文章

以下是我的回应：

这是我的代码：

render（）{
让articles=this.state.articles；
返回(
{articles.map（article=>（{article.title[0]}））}
{articles.map（（article）=>(
{文章说明}
))}

)

听起来您希望每篇文章都有一个

。这意味着您需要在数组上映射（），如下所示：

render() {
    let articles = this.state.articles;
    return <div>
        {articles.map((article, index) => <ExpansionPanel key={index}>
            ...
         </ExpansionPanel>}
    </div>;
}

render（）{
让articles=this.state.articles；
返回
{articles.map（（article，index）=>
...
}
;
}

---

现在代替代码示例中的

…

，您可以添加任何您想要的其他组件，例如

或

。您还可以使用文章的任何属性，例如

文章。描述
听起来好像您想要为每篇文章添加
。这意味着您需要
映射（）
在阵列上，如下所示：

render() {
    let articles = this.state.articles;
    return <div>
        {articles.map((article, index) => <ExpansionPanel key={index}>
            ...
         </ExpansionPanel>}
    </div>;
}

<div>
    <ExpansionPanel>
        {articles.map(article => (
            <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}><Typography>{article.title}</Typography></ExpansionPanelSummary>
            <ExpansionPanelDetails>           
                <Typography>{article.description}</Typography>
            </ExpansionPanelDetails>))}
    </ExpansionPanel>
</div>

render（）{
让articles=this.state.articles；
返回
{articles.map（（article，index）=>
...
}
;
}

现在，您可以在代码示例中添加所需的任何其他组件，例如
或
。您还可以使用文章的任何属性，例如
文章。说明

<div>
    <ExpansionPanel>
        {articles.map(article => (
            <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}><Typography>{article.title}</Typography></ExpansionPanelSummary>
            <ExpansionPanelDetails>           
                <Typography>{article.description}</Typography>
            </ExpansionPanelDetails>))}
    </ExpansionPanel>
</div>

您可以尝试上面的代码

您可以尝试上面的代码
您可以使用数组文章[2]访问特定文章。标题[0]。这将从响应中获取文章编号2

您的代码在响应方面没有出现问题。请检查，但这种方法可以获取第二篇文章


render（）{
让articles=this.state.articles；
返回(
{articles.map（article=>（{**article[2].title[0]**}））}
{articles.map（（article）=>(
{文章说明}
))}

)；
您可以使用数组文章[2]访问特定文章。标题[0]。这将从响应中获取文章编号2

您的代码在响应方面没有出现问题。请检查，但这种方法可以获取第二篇文章


render（）{
让articles=this.state.articles；
返回(
{articles.map（article=>（{**article[2].title[0]**}））}
{articles.map（（article）=>(
{文章说明}
))}

)
重复描述的原因是因为第二个循环，如果您需要每篇文章的描述，您只需要按照@code peedient的指定获取它，不需要额外的映射，因为它会给您重复的结果，除了标题，因为它位于顶部。我希望这会有所帮助。
描述的原因iption之所以重复是因为第二个循环，如果你需要每篇文章的描述，你只需要按照@code peedient的规定获得它，不需要额外的映射，因为它会给你重复的结果，除了标题，因为它位于顶部。我希望这会有所帮助。
我已经发布了一个答案，解决了如何获得单个元素的问题我想你的问题可能还有更多。你想如何显示你选择的元素？我的意思是，你希望这个元素在网页中看起来像什么。帮助解释这个问题的一个方法是打开MS Paint或类似的程序，并绘制一个你希望页面是什么的粗略示例。我想你的问题是javascript相关问题没有反应。如果我理解正确，我认为您可以使用此。state.articles[索引]我想显示一个标题，当您单击它时，会显示一个带有相关描述的下拉列表。@J.Borga编辑您的问题，以显示您如何在屏幕快照中生成输出，而不是在文章数组上映射两次，您应该只映射一次。有关详细信息，请参阅我的答案。我已经发布了一个解决如何获取单个标题的答案数组中的元素。但是，我想你的问题可能还有更多。你想如何显示你选择的元素？我的意思是，你想让它在网页中看起来像什么。帮助解释这一点的一个方法是打开MS Paint或类似的程序，并画一个粗略的示例，说明你想要的页面是什么。我想你的问题是一个javascript相关问题没有反应。如果我理解正确，我认为您可以使用此.state.articles[索引]我想显示一个标题，当您单击它时，会显示一个带有相关描述的下拉列表。@J.Borga编辑您的问题，以显示您如何在屏幕快照中生成输出，而不是在文章数组上映射两次，您应该只映射一次。有关详细信息，请参阅我的答案。但是，当我执行
this.state.articles时，它起到了作用[0]。description
它会出现重复的结果。我得到一个
警告：数组或迭代器中的每个子级都应该有一个唯一的“键”当我映射它们时，请使用prop
。@J.Borga注意，这只是一个警告。您仍然应该获得一些输出。您是否从我的代码中填写了
。
？您是否能够获得满意的结果？以修复问题