Reactjs 在Wordpress对象中迭代

我是REACT.js新手，非常感谢您的建议

• 我有一个类别的清单，我已经把一个职位下
• 如何在react js中显示这些类别列表

我尝试了以下方法：

<ul>
  {post.categories.map((category) => {
    return(
      <li>{category.name}</li>
    );
  })};
</ul>

{post.categories.map（（category）=>{
返回(
{category.name}
);
})};

但我得到了一个错误： 类型错误：post.categories.map不是一个函数

下面是我的文件

app/scr/components/Blog/Index.js

import React, { Component } from 'react';
import Layout from '../../components/Layout/Layout';
import { Link } from 'react-router-dom';


class Index extends Component {
  render() {
    return(
      <Layout>
        <ul>
          {this.props.posts.map((post) => {
            if (post) {
              return(
                <li key={post.ID} className="card">
                  <div>{post.title}</div>
                  <div>{post.date}</div>
                  <ul>
                    {post.categories.map((category) => {
                      return(
                        <li>{category.name}</li>
                      );
                    })};
                  </ul>
                </li>
              );
            } else {
              return null;
            }
          })}
        </ul>
      </Layout>
    );
  }
}

export default Index;

import React，{Component}来自'React'；
从“../../components/Layout/Layout”导入布局；
从'react router dom'导入{Link}；
类索引扩展组件{
render（）{
返回(

{this.props.posts.map（（post）=>{
如果（员额）{
返回(

{post.title}
{发布日期}

{post.categories.map（（category）=>{
返回(
{category.name}
);
})};


);
}否则{
返回null；
}
})}

);
}
}
出口违约指数；

app/scr/containers/BlogBuilder/BlogIndexBuilder.js

import React, { Component } from 'react';
import BlogIndex from '../../components/Blog/Index';
import axios from 'axios';

class BlogIndexBuilder extends Component {
  state = {
    posts: []
  };

  componentDidMount() {
    axios
      .get(
        "http://public-api.wordpress.com/rest/v1/sites/emma.wordpress.com/posts"
      )
      .then(res => {
        this.setState({ posts: res.data.posts });
        console.log(this.state.posts);
      })
      .catch(error => console.log(error));
  }

  parseOutScripts(content) {}

  render() {
    return (
      <div>
       <BlogIndex 
        posts={this.state.posts}
       />
      </div>
    );
  }
}

export default BlogIndexBuilder;

import React，{Component}来自'React'；
从“../../components/Blog/Index”导入BlogIndex；
从“axios”导入axios；
类BlogIndexBuilder扩展组件{
状态={
员额：[]
};
componentDidMount（）{
axios
.得到(
"http://public-api.wordpress.com/rest/v1/sites/emma.wordpress.com/posts"
)
。然后（res=>{
this.setState（{posts:res.data.posts}）；
log（this.state.posts）；
})
.catch（错误=>console.log（错误））；
}
parseOutScripts（内容）{}
render（）{
返回(
);
}
}
导出默认BlogIndexBuilder；

app/scr/components/Layout/Layout.js

import React from 'react';
import Aux from '../../hoc/Aux';

const layout = (props) => {
  return(
    <Aux>
      <main>{props.children}</main>
    </Aux>
  )
};

export default layout;

从“React”导入React；
从“../../hoc/Aux”导入辅助项；
常量布局=（道具）=>{
返回(
{props.children}
)
};
导出默认布局；

您不能将

映射到对象上。它需要是一个数组。如果需要，可以使用
Object.values（post.categories）
将其转换为数组：


{Object.values（post.categories）.map（（category）=>{
返回(
{category.name}
);
})};