Question

我正在尝试render an array of objects using Map，到目前为止，我只能将第一项呈现给浏览器。

我认为我的.map函数有什么问题，但是我对React和JS的了解不足以找出问题所在。

这是我的App.js文件：

// import东西在这里

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      items: []
    };
    this.componentWillMount = this.componentWillMount.bind(this);
  }

  componentWillMount() {
    fetch('THE-JSON-URL-IS-HERE')
    .then(res => res.json())
    .then(data => {
      this.setState({ items: data });
    });

 render() {

const { items } = this.state;

return (
  <div className="App">

    { items.map((item, num) => {
        return (
          <div className="people">

            <div className="elem">
              <p key={num}>{item.elems}</p>   
            </div>     

              <p key={num}><strong>{item.name}</strong></p>
              <p key={num}><small>{item.title}</small></p>             

            <div className="hidden">
              <p key={num}><small>{item.email}</small></p>
              <p key={num}><small><strong>Office: </strong>{item.office}</small></p>
            </div>
            {/* <p>{item.manager}</p> */}
          </div>

        );
    })}        
  </div>
    );
  }
}

export default App;

这是JSON文件的示例：

[
  {
    "elems": "Pr",
    "name": "Abby Langdale",
    "title": "President",
    "email": "alangdale0@hubpages.com",
    "office": "Javanrud",
    "manager": [
      {
        "elems": "Vp",
        "name": "Johnnie Mouncey",
        "title": "Vice President",
        "email": "jmouncey0@cnet.com",
        "office": "Canto",
        "manager": [
          {
            "elems": "Vp",
            "name": "Concordia Burgwyn",
            "title": "VP Quality Control",
            "email": "cburgwyn0@dyndns.org",
            "office": "Zhoukou",
            "manager": [
              {
                "elems": "En",
                "name": "Prissie Sainsberry",
                "title": "Web Developer IV",
                "email": "psainsberry0@yellowbook.com",
                "office": "Tugu",
                "manager": null
              },

等Abby的信息就是我提供的全部信息。

Answer 1

由于将数组和对象嵌套在第一个array元素中，因此项的长度为1，唯一的元素是Abby元素，其余数据嵌套在其中。要映射所有元素，items应该看起来像这样的数组：

[
  {
    "elems": "Pr",
    "name": "Abby Langdale",
    "title": "President",
    "email": "alangdale0@hubpages.com",
    "office": "Javanrud",
    "manager": ""
  },
  {
    "elems": "Vp",
    "name": "Johnnie Mouncey",
    "title": "Vice President",
    "email": "jmouncey0@cnet.com",
    "office": "Canto",
    "manager": ""
  },
  {
    "elems": "Vp",
    "name": "Concordia Burgwyn",
    "title": "VP Quality Control",
    "email": "cburgwyn0@dyndns.org",
    "office": "Zhoukou",
    "manager": ""
  },
  {
    "elems": "En",
    "name": "Prissie Sainsberry",
    "title": "Web Developer IV",
    "email": "psainsberry0@yellowbook.com",
    "office": "Tugu",
    "manager": null
  }
]

如果需要维护管理者之间的关系，可以向每个对象添加一个ID，并从另一个对象中引用它。

  [
      {
        "elems": "Pr",
        "name": "Abby Langdale",
        "title": "President",
        "email": "alangdale0@hubpages.com",
        "office": "Javanrud",
        "manager": "",
        "id" : 1
      },
      {
        "elems": "Vp",
        "name": "Johnnie Mouncey",
        "title": "Vice President",
        "email": "jmouncey0@cnet.com",
        "office": "Canto",
        "manager": 1
      },
      ...
]

您需要使用过滤器助手功能来正确查找经理的姓名，但这应该可以工作。

Answer 2

首先尝试展平阵列。您将需要知道阵列将具有的最大级别数。展平后，您可以使用地图功能：

const flatItems = items.flat(3);    // flatten up to 3 levels
items.map((item, num) => {
        return ( <render your div> );
}

React-使用Map渲染对象数组

2 个答案: