挂载组件后反应状态重置回初始值

Question

我的组件是一个包含主要和次要导航的 header。到目前为止，我只处理主导航，它在网站的大部分区域之间进行选择。状态被提升到主 Header 组件，而 UpperMenu 组件仅接收事件侦听器和活动 link ID 作为道具。

问题是，虽然状态更改正确进行，但在执行挂载时，状态会变回初始值。这会导致 CSS 中的 "blink"，这意味着视图已正确呈现，并且在一瞬间后它会返回到最初的 link 被选中。我不知道什么可能导致这种行为，希望得到帮助。

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

这是因为当你点击link时，页面会重新渲染，因此状态会重置为初始状态。

您可以通过将 a 标签更改为 react-router 的 Link 来解决此问题（仍在思考为什么要导入它并使用 a 标签）。

解释：

当您点击 link（a 标签）时，浏览器（而非 React-Router）会将您引导至 "mysite/sectionX" 页面，就像普通的静态网站一样。
当浏览器重新渲染新页面时，所有组件的状态都处于初始状态。 React-Router 读取 URL 中的路线并将您带到该部分的组件。

如果您使用 Link，react-router（不是浏览器），将负责路由和更改 URL，只有路由组件会被重新渲染，状态被保留。

挂载组件后反应状态重置回初始值

React state resets back to initial value after component is mounted

reactjs

react-lifecycle