在reactjs中的不同span标记中分离并显示多个json值

我有一个名为

blogData

的

json

对象，其中包含json数据。在json obj中，

标记

键可能有多个标记值。我想在使用map函数迭代时，在

span

tag中分别显示标签值

现在，多个标记显示在一个跨度标记中（请参见下文），我如何解决这个问题

Home.js

const [searchResults, setSearchResults] = useState([]);        

               <div className="container">
                    {
                    searchResults.map(({ id, title, images, description, tags }) => (
                        <div key={id} className="column-center">
                            {/* <img className="blogImage" key={images} src={images} alt="image"></img> */}
                            <div className="blogtitle">
                                <span key={title}>{title}</span>
                            </div>
                            <section>
                            <p className="blogdescription" key={description}>{description}</p>
                            </section>
                            <section className="col1">
                                <span key={tags}>{tags}</span>
                            </section>
                            <section className="col2">
                                <a>Read more {'>'}{'>'}</a>
                            </section>
                        </div>
                      ))
                    }
               </div>

const[searchResults，setSearchResults]=useState（[]）；
{
searchResults.map（{id，title，image，description，tags}）=>(
{/*  */}
{title}
{description}
{tags}
阅读更多{'>'}{'>'}
))
}

我想这就是你想要的

{Array.isArray（标记）(
tags.map（（tag）=>(
{tag}
))
) : (
{tags}
)}

---

即使只有一个元素，

tags

字段也始终是数组，这样代码就简单多了。

谢谢你，Alex，我不认为我们应该在这种情况下再次迭代。非常感谢你的帮助。不知道为什么有人在我的问题上投了反对票。。我已经投了赞成票并接受了你的答案。我猜你被否决的原因（不是我）是因为你没有提供一个有效的例子（使用codesandbox），并且因为你的问题代码有点混乱，无法让回答的人整理。

const [searchResults, setSearchResults] = useState([]);        

               <div className="container">
                    {
                    searchResults.map(({ id, title, images, description, tags }) => (
                        <div key={id} className="column-center">
                            {/* <img className="blogImage" key={images} src={images} alt="image"></img> */}
                            <div className="blogtitle">
                                <span key={title}>{title}</span>
                            </div>
                            <section>
                            <p className="blogdescription" key={description}>{description}</p>
                            </section>
                            <section className="col1">
                                <span key={tags}>{tags}</span>
                            </section>
                            <section className="col2">
                                <a>Read more {'>'}{'>'}</a>
                            </section>
                        </div>
                      ))
                    }
               </div>

<section className="col1">
  {Array.isArray(tags) ? (
    tags.map((tag) => (
      <span style={{ marginRight: "10px" }}>{tag}</span>
    ))
  ) : (
    <span>{tags}</span>
  )}
</section>