Не могу правильно отобразить массив в массиве объектов в реагировать

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

Я ожидаю лучшей "карты" массива, я пытаюсь получить такой результат

Название статьи: Встань и беги Writer: Johnny

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(' ').

Answer 2

Если вы хотите преобразовать массив тегов в строку, есть несколько вариантов в зависимости от желаемого формата:

При использовании простого объединения ваше форматирование ограничено: (Вы можете передавать символы, которые будут добавлены послекаждая запись, например .join(' ') только для пробелов)

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

Используя функцию reduce, вы можете дополнительно контролировать форматирование вашей строки:

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

Чтобы изменить форматпросто отредактируйте строку, которая прикреплена ${tag}

Answer 3

Вы можете создать отдельный компонент для тега и стилизовать его. Затем перепишите эту строку:

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