Переменная состояния реакции не будет отображаться после изменения маршрута

Question

Всякий раз, когда я go перехожу на новый URL, а затем пытаюсь go вернуться к исходному URL в моем приложении, переменные состояния не отображаются. Я использую реагировать, реагировать на маршрутизатор и шаблон coreUI. Например, если я впервые загружаю свою одну веб-страницу, я получаю следующее:

Когда я go где-то в моем приложении и они возвращаются на тот же URL-адрес, который я получаю:

Загруженные данные взяты из тестового файла, который у меня есть локально, и, несмотря на просмотр Данные в консоли не отображаются. Вот часть моего кода:

import category_data from './category_data.js';

function processCategories(category, categories) {
  let children = categories.filter( a => category.children.indexOf(a._id) > -1 );
  for(let x = 0; x < children.length; x++) {
    children[x].children = processCategories(children[x], categories);
  }

  children.sort( (a, b) => a.order - b.order);
  return children;
}


class Category extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    if(this.props.category.children.length)  {
      return (
        <>
          <ListItem ml="3" display="block">
          {this.props.category.title}
          </ListItem>
          <List display="block" className="ml-3">
            { this.props.category.children.map( a => <Category category={a} /> ) }
          </List>
        </>
      )
    } else {
      return (
        <ListItem ml="3" display="block">
          {this.props.category.title}
        </ListItem>
      )
    }
  }
}

class Deck extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div className="card">
        <div className="card-header">
          <i className="icon-note"></i> {this.props.deck.title}
        </div>
        <div className="card-body">
          <Row>
            <List display="block">
              {this.props.deck.children.map( a => <Category category={a} /> )}
            </List>
          </Row>
        </div>
      </div>
    )
  }
}


class DeckDisplay extends Component {

  constructor(props) {
    super(props);

    this.state = {
      roots: []
    }
  }

  async componentDidMount () {
    let roots = [],
      categories = [];

    for(let x = 0; x < category_data.length; x++) {
      if(category_data[x].root) {
        roots.push(category_data[x]);
      } else {
        categories.push(category_data[x]);
      }
    }

    for(let x = 0; x < roots.length; x++) {
      roots[x].children = processCategories(roots[x], categories)
    }

    await this.setState({
      roots: roots
    });
  }

  render() {
    return (
      <div className="animated fadeIn">
        {this.state.roots.map( props => <Deck deck={props} />)}
      </div>
    );
  }
}

export default DeckDisplay;

Для получения дополнительной информации о навигации вы можете увидеть репозиторий github . Просто перейдите к src/views.

Обновление:

Когда я первоначально загружаю колоды, мое состояние корней должно быть таким, каким оно должно быть для всех категорий, вложенных друг в друга. Когда я возвращаюсь к URL, массив детей пуст.