Почему React-компонент рендерится, но не отображается в браузере?

Question

[tj57]

Я получаю с сервера массив объектов. Он имеет вложенную структуру. Нужно его срендерить и получить такое дерево:

Проблема в том, что рендерится он нормально, но в браузере отображается через раз. То есть, у меня отображаются только внешние элементы дерева:

При этом в DOM-дереве элементы присутствуют:

И они рендерятся полностью, включая самые вложенные. Затем я обновляю страницу - и всё снова отобразилось. Причём, это происходит не строго через раз, а в случайном порядке.
Код:

import React from 'react';
import ReactDOM from 'react-dom';
import EqItem from './EqItem';

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

 componentDidMount() {
  var buildings = new Scorocode.Query("buildings");
    buildings.find().then((finded) => {
    let buildings = finded.result;
    let buildingsJSON = JSON.stringify(buildings);
     this.setState({buildings: buildings, loading: false});
    console.info("buildings",JSON.stringify(buildings));
  });
}

render() {

  return (
   <div id="multi-derevo">
    <h4><a href="#">Начальная схема</a></h4>
     <ul>
      {
      this.state.buildings.length !== 0 &&
      this.state.buildings.map((building, index) => {
      return  (
        <li key={index}><span><a id={`${building._id}`}>{building.name}</a></span>
          <ul>
            { building&&building.rooms !== undefined && building.rooms.map((room, index) => {
            return (
              <li key={index}><span><a id={`${room.id}`} onClick={this.props.onToggleEqItem}>{room.name}</a></span>
                <ul>
                  { room&&room.children!==undefined&&room.children.map((item, index) => {
                  return (
                    <li key={index}><span><a id={`${item.id}`} onClick={this.props.onToggleEqItem}>{item.name}</a></span>
                    <ul>
                      {item&&item.children!==undefined&&item.children.map((i, index) => {
                          return (
                              <li key={index}><span><a id={`${i.id}`} onClick={this.props.onToggleEqItem}>{i.name}</a></span></li>
                          )})
                        }
                    </ul>
                    </li>
                  )})
                  }
                </ul>
              </li>
              )})
              }
          </ul>
        </li>
        )})
       }
    </ul>
   </div>
   )
 }
}
export default Tree;

Если взять и преобразовать массив в JSON и просто захардкодить его в componentDidMount(), то всё нормально отображается при каждом запуске:

componentDidMount(){
   let buildings = [{"_id":"FG7pRodZNF","createdAt":"2017-04-04T10:45:23.103Z","updatedAt":"2017-04-04T11:17:23.210Z","name":"Главный корпус","readACL":[],"removeACL":[],"updateACL":[],"rooms":[{"children":[{"id":"b1floor1room1","name":"101"},{"name":"102","id":"b1floor1room2"},{"id":"b1floor1room3","name":"103"},{"id":"b1floor1room4","name":"104"},{"id":"b1floor1room5","name":"Вахта"}],"id":"b1floor1","name":"Этаж 1"},{"children":[{"children":[{"id":"b1floor2leftroom1","name":"Приемная директора по общественным связям в федеральном регионе"},{"id":"b1floor2leftroom2","name":"102"},{"id":"b1floor2leftroom3","name":"103"}],"id":"b1floor2left","name":"Левое крыло"},{"children":[{"id":"b1floor2rightroom1","name":"101"},{"id":"b1floor2rightroom2","name":"102"},{"id":"b1floor2rightroom3","name":"103"}],"id":"b1floor2right","name":"Правое крыло"},{"name":"Подсобное помещение","id":"b1floor2roomx"}],"id":"b1floor2","name":"Этаж 2"}]},{"_id":"CacR5AWhfr","removeACL":[],"updateACL":[],"createdAt":"2017-04-04T11:14:40.421Z","updatedAt":"2017-04-04T11:16:49.725Z","name":"Офис на улице Линии Октябрьской железной дороги","readACL":[],"rooms":[{"name":"Главное помещение офиса","id":"b2room1"},{"id":"b2room2","name":"Подсобное помещение"},{"id":"b2room3","name":"Кабинет управляющего"},{"id":"b2room4","name":"Складское помещение"}]}]
        this.setState({buildings: buildings});
  }

Я пробовал преобразовать полученный массив в JSON и положить его в state, но не понял, как правильно это сделать. Может, есть еще возможные пути решения проблемы ?

Comments

[Medin K]

Вам бы почитать про рекурсии.
А то я знаю одного программиста который также вложенные циклы строчит.

[Петр Мухуров]

Зачем полученный массив преобразовывать в JSON?

[Medin K]

Не по сабжу, но в помощь https://codesandbox.io/s/l39xljyv5m
Как говорится "Разделяй и властвуй"

[tj57]

Medin K, Cпасибо. Я попробовал сделать так же, только взяв данные с сервера - рендерится всё равно через раз. Я пытался решить эту проблему c помощью async/await:

export class TreeContainer extends React.Component {
  constructor() {
    super();
    this.state = {
      buildings: [],
      loading: true
    };
    this.handleToggleEqItem = this.handleToggleEqItem.bind(this);
  }

  componentDidMount() {
   var buildings = new Scorocode.Query("buildings");
     buildings.find().then( async (finded) => {
     let buildings = finded.result;
     let buildingsJSON = JSON.stringify(buildings);
     await this.setState({buildings: buildings, loading: false});
     console.info("buildings",JSON.stringify(buildings));
   });
   this.render();
 }
render() {
    if (this.state.loading)
    return (<div>Загрузка схемы...</div>)
    return ( ... )
}

И это не помогло