Question

我的组件是包含主要和辅助导航的标头。到目前为止，我只处理主导航，它在网站的大部分区域之间进行选择。状态被提升到主Header组件，而UpperMenu组件仅接收事件监听器和活动链接ID作为props。

问题在于，当状态更改正确进行时，执行安装时，状态会变回初始值。这会导致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标记更改为react-router的{{3}}来解决此问题（仍在讨论为什么要导入它并使用a标记）。

<强>解释

当您点击链接（a标记）时，浏览器（不是React-Router）会将您引导至“mysite / sectionX”页面，就像普通的静态网站一样。
当浏览器重新呈现新页面时，所有组件的状态都处于其初始状态。 React-Router读取URL中的路由并将您路由到该部分的组件。

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

装载组件后，React状态重置为初始值

1 个答案: