reactjs - 更改路由后不会显示 React 状态变量

Question

每当我转到一个新的 url，然后尝试返回到我的应用程序中的原始 URL 时，状态变量都不会显示。我正在使用 react、react-router 和 coreUI 模板。例如，如果我第一次加载我的一个网页，我会得到以下信息：

当我在我的应用程序中去其他地方并且他们回到同一个网址时，我得到了这个：

加载的数据来自我在本地拥有的测试文件，尽管在控制台中看到了数据，但它并没有呈现。这是我的代码的一部分：

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 时，children 数组是空的。