Состояние реакции сбрасывается обратно к исходному значению после монтирования компонента

Question

Мой компонент - это заголовок, содержащий первичную и вторичную навигацию. Пока я имею дело только с первичной навигацией, которая выбирает между большими разделами сайта. Состояние поднимается до основного компонента Header, в то время как компонент UpperMenu получает только прослушиватель событий и идентификатор активной ссылки в качестве реквизитов.

Проблема заключается в том, что, хотя изменения состояния выполняются правильно, при монтировании состояние возвращается к исходному значению. Это вызывает "мерцание" в 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;

PS Я попытался отладить жизненный цикл, чтобы определить, в какой момент это происходит, и проблема начинается с componentDidMount.

Answer 1

Это потому, что когда вы нажимаете на ссылку, страница перерисовывается и, таким образом, состояние сбрасывается в исходное состояние.

Вы можете исправить это, изменив a тег к react-router "s Link (все еще в замешательстве, почему вы импортировали его и используете a тег).

Объяснение:

1. При нажатии на ссылку (a тег) браузер (не React-Router) перенаправляет вас на страницу "mysite/sectionX", как обычный статический сайт.
2. Когда браузер повторно отображает новую страницу, состояние всех компонентов находится в своем начальном состоянии. React-Router читает маршрут в URL и направляет вас к компоненту этого раздела.

Если вы используете Link, react-router (не браузер), позаботится о маршрутизации и изменении URL, будет перенаправлен только перенаправленный компонент и сохранено состояние.