парсинг wordpress api json ответ в реакции с использованием .map

Question

я пытаюсь проанализировать обычную конечную точку сообщений на WordPres, используя реагировать JS. Однако я получаю эту ошибку, когда я пытаюсь выполнить итерацию .map для объекта ответа

Ошибка: объекты недопустимы как дочерний элемент React (найдено: объект с ключами {предоставлен, защищен}). Если вы намеревались визуализировать коллекцию дочерних элементов, используйте вместо этого массив.

- это функция в компоненте для чтения сообщений и их отображения.

 getPosts(){
      var th = this;
      var url = "http://localhost/portal/blog/wp-json/wp/v2/posts";

        axios.get(url,{}).then(function(response){
            var obj =response.data;
            console.info(obj);
            th.setState({
                blogPosts: obj
            });
        },this)

      console.log(th.state.blogPosts)
  }

- это отображение в Функция render ().

render() {
    return (
        <div className="ui items">
            {


            this.state.blogPosts.map((post,index)=>

                <div className="item">
                    <div className="ui tiny image">
                        <img src="https://react.semantic-ui.com/images/wireframe/image.png" />
                    </div>
                    <div className="content">
                        <a className="header">{post.title}</a>
                        <div className="meta">{post.excerpt}</div>
                        <div className="description">
                            {post.content}
                        </div>
                        <div className="extra">{post.link}</div>
                    </div>
                </div>
            )}
        </div>
    );
  }

вот это json для анализа

[
{
"id": 1,
"date": "2020-03-03T10:46:56",
"date_gmt": "2020-03-03T10:46:56",
"guid": {
"rendered": "http://localhost/coaching-portal/blog/?p=1"
},
"modified": "2020-03-03T10:46:56",
"modified_gmt": "2020-03-03T10:46:56",
"slug": "hello-world",
"status": "publish",
"type": "post",
"link": "http://localhost/coaching-portal/blog/2020/03/03/hello-world/",
"title": {
"rendered": "Hello world!"
},
"content": {
"rendered": "\n<p>Welcome to WordPress. This is your first post. Edit or delete it, then start writing!</p>\n",
"protected": false
},
"excerpt": {
"rendered": "<p>Welcome to WordPress. This is your first post. Edit or delete it, then start writing!</p>\n",
"protected": false
},
"author": 1,
"featured_media": 0,
"comment_status": "open",
"ping_status": "open",
"sticky": false,
"template": "",
"format": "standard",
"meta": [],
"categories": [
1
],
"tags": [],
"_links": {}
}
]

Answer 1

Здесь определенно есть проблема: <div className="meta">{post.excerpt}</div>

post.expcerpt выглядит следующим образом

excerpt:{
"rendered": "\n<p>Welcome to WordPress. This is your first post. Edit or delete it, then start writing!</p>\n",
"protected": false",
}

Попробуйте вместо этого использовать <div className="meta">{post.excerpt.rendered}</div>, если вы хотите получить текст из этого объекта .

Это похоже на аналогичный случай с вашим <a className="header">{post.title}</a>

Answer 2

Убедитесь, что все элементы, которые вы отображаете в JSX, являются примитивами, а не объектами при использовании ReactJS.

Я также вижу заголовок, выдержку, содержимое - объекты. Попробуйте, возможно, отформатировать объект и вывести необходимые поля

Например

render() {
    return (
        <div className="ui items">
            {
            this.state.blogPosts.map((post,index)=>
                <div className="item">
                    <div className="ui tiny image">
                        <img src="https://react.semantic-ui.com/images/wireframe/image.png" />
                    </div>
                    <div className="content">
                        <a className="header">{post.title.rendered}</a>
                        <div className="meta">{post.excerpt.rendered}</div>
                        <div className="description">
                            {post.content.rendered}
                        </div>
                        <div className="extra">{post.link}</div>
                    </div>
                </div>
            )}
        </div>
    );
}