reactjs - コンポーネントがマウントされた後、React 状態が初期値にリセットされます

Question

私のコンポーネントは、プライマリ ナビゲーションとセカンダリ ナビゲーションを含むヘッダーです。これまでのところ、Web サイトの大きなセクションから選択するプライマリ ナビゲーションのみを扱っています。状態はメインのヘッダー コンポーネントに持ち上げられますが、UpperMenu コンポーネントはイベント リスナーとアクティブなリンク ID のみを props として受け取ります。

問題は、状態変更は正しく行われますが、マウントを実行すると状態が初期値に戻ってしまうことです。これにより、CSS で「点滅」が発生します。つまり、ビューが正しくレンダリングされ、わずか 1 秒後に最初に選択されていたリンクに戻ります。何がそのような動作を引き起こす可能性があるのか​​ わからないので、助けていただければ幸いです。

Header.js:

import React from 'react';
import UpperMenu from './UpperMenu';
import TopHeader from './TopHeader';
import styles from './Header.css';

const sections = [ 
  ["/sec0","section0"],
  ["/sec1","section1"],
  ["/sec2","section2"]
];

class Header extends React.Component {

constructor(props){
  super(props);
  this.state = {section: 0,
                submenu: 0};
}
// HERE THE STATE IS SET CORRECTLY
onSectionClick(event){
  console.log(event.target.id);
  this.setState({section:event.target.id[8]},
                 function () {console.log(this.state);});
}

// HERE PROBLEMS OCCUR, STATE IS INITIAL
componentDidMount(){
  console.log(this.state);
}

render() {
    return ( 
      <header id={styles.header}>
        <TopHeader />
        <UpperMenu  sections={sections} 
                    activeSection={sections[this.state.section][1]} 
                    onSectionClick={this.onSectionClick.bind(this)}/>
      </header>
    );
  };
 }

 export default Header;

UpperMenu.js:

import React from 'react';
import styles from './UpperMenu.css';
import {Link} from 'react-router';

class UpperMenu extends React.Component{

  render(){
   var activeSection = this.props.activeSection;
   var onSectionClick = this.props.onSectionClick;
   var sectionIndex = -1;

   return(
     <div className={styles.mmenu}>
       <ul className={styles.normal}>
         {this.props.sections.map(function(section){
            sectionIndex++;
            return( 
              <li key={section[1]}
                  id={"section_" + sectionIndex}
                  className={(activeSection === section[1]) ? styles.active : ""}
                  onClick={onSectionClick}>
                  <a id={"section_" + sectionIndex + "_a"}
                     href={section[0]}>{section[1]}</a>
              </li>
           )})}
       </ul>
    </div>);
    }
   }

export default UpperMenu;

PSライフサイクルをデバッグして、これがどの時点で発生し、問題がcomponentDidMountで始まるかを判断しようとしました。