如何在 React 中渲染多个嵌套数组对象？答案

【问题标题】：How to render multiple nested array objects in React?如何在 React 中渲染多个嵌套数组对象？
【发布时间】：2019-03-11 23:30:38
【问题描述】：

我从服务器获取一个数组，其中包含包含对象的数组： Arrays with objects

这是关于 2 座建筑物的信息。有2栋，一楼有2层，一楼有几个房间，二楼有2个翼楼，每个翼楼里面都有几个房间。第二栋楼只有几个房间。作为布局，它看起来像这样： scheme

我想用这种树形式的对象来渲染这个数组。我设法将其渲染为这种状态：result。接下来，我需要渲染嵌套最多的组件，但是我遇到了一个问题。这是我的组件文件：

  import React from 'react';
  import ReactDOM from 'react-dom';

 class Tree extends React.Component {
  constructor(props) {
  super(props);
  this.state = {
    buildings: [],
    rooms: []
  }
}

componentDidMount() {
  var buildings = new Scorocode.Query("buildings");
    buildings.find().then((finded) => {
    let buildings = finded.result;
    this.setState({buildings: buildings});
    buildings.map(buildings => (
      this.setState({rooms: buildings.rooms})
    ))
    console.info(buildings);
  });
}

render() {
 return (
   <div id="multi-derevo">
    <h4><a href="#">Начальная схема</a></h4>
    <ul>
      {this.state.buildings.map(buildings => (
        <li key={this.state.buildings.name}><span><a>{buildings.name}</a></span>
          <ul>
            {buildings.rooms.map((room, name) => (
              <li key={buildings.rooms.name}><span><a>{room.name}</a></span>
                <ul>
                  {rooms.children.map((child, name) => (
                    <li key={rooms.children.name}><span><a>{child.name}</a></span></li>
                  ))}
                </ul>
              </li>
            ))}
          </ul>
        </li>
        ))}
    </ul>
   </div>
 );
}
}
export default Tree;

对于嵌套最多的组件，我收到错误“未定义房间”。据我了解，我需要将其添加到状态中，但我在这里做错了：

 buildings.map(buildings => (
  this.setState({rooms: buildings.rooms})
))

我是 React 的新手，所以请不要严格评判我。我试图找到解决方案几个小时，仍然无法解决这个问题。

【问题讨论】：

澄清一下，我看到您将map 设置为(entity, name) => 并希望确保name 不会被混淆，因为Array.prototype.map 将index 传递到其中.

标签： javascript reactjs

【解决方案1】：

也许这行得通？不过没测试过

class Tree extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      areas: [],
    }
  }

  componentDidMount() {
    var areas = new Scorocode.Query("buildings");
    this.setState({ areas })
  }

  render() {
    return (
      <ul>
        {this.props.parent && <span>{this.props.parent.name}</span>}
        {this.state.areas.map((area, i) => {
          <li key={i}><Tree parent={area} /></li>
        })}
      </ul>
    )
  }
}
export Tree;

【讨论】：