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

Question

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

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

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; 

P.S.ライフサイクルをデバッグしようとしましたが、どの時点でこの問題が発生し、問題はcomponentDidMountで始まります。

Answer 1

リンクをクリックすると、ページが再レンダリングされ、状態が初期状態にリセットされるためです。

あなたは（まだなぜあなたはそれをインポートし、aタグを使用しましたwodering）react-routerのLinkに変更によってaタグをこの問題を解決することができます。

説明：

1. あなたは、通常の静的なウェブサイトなどの "個人用サイト/ sectionX" ページへのリンク（aタグ）ブラウザ（ないReact-Router）ルートあなたを、をクリックします。
2. ブラウザが新しいページを再表示すると、すべてのコンポーネントの状態は初期状態になります。 React-RouterはURLのルートを読み取り、そのセクションのコンポーネントに誘導します。

あなたがLinkを使用する場合は、react-router（ないブラウザ）は、ルーティングの世話をし、URLを変更します、唯一のルーティングされたコンポーネントが再レンダリングされ、状態が保たれています。