无法在React.js中正确映射对象数组中的数组

时间:2019-06-30 10:51:22

标签: javascript arrays reactjs object ecmascript-6

我的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>
    )
}
}

我希望数组有更好的“映射” 我试图得到这样的结果

文章标题:启动并运行 作家:约翰尼

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

代替

Tags: reactjavascript

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

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

我该怎么做?

3 个答案:

答案 0 :(得分:1)

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

答案 1 :(得分:0)

您可以为标签创建一个单独的组件并为其设置样式。 然后重写此行:

tags={post.tags.map(xTag => {
    return <Tag>{xTag}</Tag>;  // or <Tag content={xTag} />
})}

答案 2 :(得分:0)

如果您想将标签数组转换为字符串,则根据所需格式有几种选择:

使用简单的联接,您的格式受到限制:(您可以传入将在每个条目后附加的字符,例如.join(' ')仅用于空格)

post.tags.join() // Returns 'react,javascript'

使用reduce函数,您可以进一步控制字符串的格式:

post.tags.reduce((string, tag) => string += `${tag} `, '')

要更改格式,只需编辑附加在${tag}上的字符串