javascript - 无法在reactjs中正确地处理对象数组中的 'map'数组

Question

我的 JSON“虚拟”后端中有一组对象(这里只有一个，但这并不重要)。在每个对象中，我都有一个属性“tags”，它也包含简单的数组，让我向您展示一个示例

[
 {
  "title": "Get up and run",
  "author": "Johnny",
  "tags": ["react", "javascript"]
 }
]

我尝试映射一个数组，它给了我一个结果:(参见代码)

Article title: Get up and run
Writer: Johnny
Tags: reactjavascript

但我想得到这样的结果:

Article title: Get up and run
Writer: Johnny
Tags: react javascript (or "react, javascript" or "#react #javascript")

看来我无法同时正确映射“标签”数组和对象的主数组。 :(你能帮我吗？

class Content extends Component {
 state = {
    posts: []
}

componentDidMount () {
    axios.get("json-file.json")
    .then(response => {
            this.setState({posts: response.data.map(post => {
                return post; /*here I get the whole data from dummy 
backend */
            })})
        }
    )
}

render () {
    const post = this.state.posts.map(post => {
        return <Post 
            title={post.title} 
            date={post.date} 
            author={post.author}
            tags={post.tags.map(xTag => {
                return xTag ;
            })} /* I have other Component which correctly renders this... 
 no worries here */
            />
    })

    return (
        <div>
            {post}
        </div>
    )
}
}

我期待更好的数组“ map ”我尝试得到这样的结果

文章标题:启动并运行作者:强尼

Tags: react javascript (or "react, javascript" or "#react #javascript") 

而不是

Tags: reactjavascript

或

Tags: ["react", "javascript"] (it was the worst version :)(its fixed ;) ) )

我想同时正确地映射对象数组和“标签”数组，

我怎样才能做到这一点？

Answer 1

执行 tags={post.tags.map(xTag => { return xTag ; })} 相当于 tags={post.tags}。所以影响最终格式的相关代码在Post组件中。因此可以使用 tags.join(', ') 或 tags.map(t => '#'+t).join(' ')。