Question

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

这是我的回复：

这是我的代码：

    render() {
        let articles = this.state.articles;
        return (
            <div>
                <ExpansionPanel>
                        {articles.map(article => (<ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}><Typography>{article.title[0]}</Typography></ExpansionPanelSummary>))}
                    <ExpansionPanelDetails>           
                            {articles.map((article) => (
                                <Typography>{article.description}</Typography>
                            ))}<br />
                    </ExpansionPanelDetails>
                </ExpansionPanel>
            </div>
        );

//已修复文章标题，但文章描述在重复。

我可以指定要获得的标题，但是当我使用this.state.articles[0].description时，会在下拉菜单中得到重复的结果。

相关代码：

<ExpansionPanel>
                    {articles.map(articles => (<ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}><Typography>{this.state.articles[1].title}</Typography></ExpansionPanelSummary>))}         
                    {articles.map((articles) => (<ExpansionPanelDetails><Typography>{this.state.articles[1].description}</Typography></ExpansionPanelDetails>))}<br />
</ExpansionPanel>

//添加了新代码段

{articles.map((articles, index) => (
                    <div>
                        <ExpansionPanel key={index}>
                            <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}><Typography>{this.state.articles.title}</Typography></ExpansionPanelSummary>       
                            <ExpansionPanelDetails><Typography>{this.state.articles.description}</Typography></ExpansionPanelDetails><br />
                        </ExpansionPanel>
                    </div>
                ))}

//固定...必须使用属性articles代替this.state.articles。这解决了重复问题和显示问题。

Answer 1

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

尚不清楚您想要什么。但是我能猜到的是，您想要这样的东西

index1---summary
--index1 detail hidden or whatever
index2---summary
--index2 detail hidden or whatever
index3---summary
--index3 detail hidden or whatever

您可以尝试上面的代码

Answer 2

听起来每个文章都需要<ExpansionPanel>。这意味着您需要像这样在数组上map()：

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

现在在代码示例中代替...的地方，您可以添加所需的任何其他组件，例如<ExpansionPanelSummary>或<ExpansionPanelDetails>。您还可以使用文章的任何属性，例如article.description。

Answer 3

重复描述的原因是由于第二个循环，如果您需要每篇文章的描述，只需按照@ code-apprentice here指定的方式获取它，则多余的映射为由于标题位于顶部，因此不需要标题，因为标题会给您重复的结果。我希望这会有所帮助。

Answer 4

您可以使用数组article [2] .title [0]访问特定帖子。这将从响应中获取文章2。

您的代码无法正常响应。请检查，但是这种方法可以获取第二篇文章。

    render() {
        let articles = this.state.articles;
        return (
            <div>
                <ExpansionPanel>
                        {articles.map(article => (<ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}><Typography>{**article[2].title[0]**}</Typography></ExpansionPanelSummary>))}
                    <ExpansionPanelDetails>           
                            {articles.map((article) => (
                                <Typography>{article.description}</Typography>
                            ))}<br />
                    </ExpansionPanelDetails>
                </ExpansionPanel>
            </div>
        );

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

4 个答案: