问：在 react js 中渲染字符串数组答案

【问题标题】：Q: Render array of strings in react js问：在 react js 中渲染字符串数组
【发布时间】：2020-06-04 07:38:51
【问题描述】：

我有一个字符串数组，我正在尝试使用 react js 在组件中渲染它

这个 cmets 数组在我的帖子中

评论 = ["test1", "test2", "test3","test4"] 注意：我从 firebase 文档中获取这个数组

我可以渲染它，但我有一个问题。当我通过 map () 渲染时，这个数组在一行中返回所有项目。我在社区和谷歌上研究了这个问题的一些解决方案，我发现了这个主题：How to display an array of strings in react component

即便如此，我还是无法彻底解决。

我的问题是：如何在自己的段落中返回数组的每个索引？

constructor(props) {
    super(props);
    this.state = {
      Posts: [],
    }

 <div className="text-comentarios">    
     {this.state.Posts.map( (itens,index) =>{
         <div>
           <p key={index}> {itens.comentarios} </p>
         </div>
       )
       })}
 </div>

我有这张地图的回报如下：

Coments: test1test2test3test4

我如何获得这个回报，例如：

Coments: test1
Coments: test2
Coments: test3
Coments: test4

【问题讨论】：

标签： reactjs firebase jsx

【解决方案1】：

您可以像处理帖子一样映射 cmets

constructor(props) {
    super(props);
    this.state = {
      Posts: [],
    }

 <div className="text-comentarios">    
     {this.state.Posts.map( (itens,index) =>{
         <div>
           <div key={index}>
             {itens.commentarios.map((comment, commentIndex) => <p key={commentIndex}>{comment}</p> )}
           </div>
         </div>
       })}
 </div>

【讨论】：

感谢您给予我帮助并花时间帮助我

【解决方案2】：

也许您在 .text-commentarios 或父类之上设置了 display: inline 或 flex 属性。请删除该属性以显示为非内联行。最后你的代码包含 )} ，这是不必要的尝试删除它并更改代码如下。并使用 span 标签而不是 p 标签在 div 元素中显示为内联。然后你需要稍微修改一下代码

{this.state.Posts.map( (itens,index) =>{
     <div key={index}>
         <span class="row-title"> Comments: </span>
         <span> {itens.comentarios} </span>
     </div>
  })
}

希望这能帮助你理解！

【讨论】：

我会试试这个，然后回来反馈