Reactjs 组件安装后，React状态重置回初始值

“我的组件”是包含主导航和辅助导航的标题。到目前为止，我只处理主导航，它在网站的大部分之间进行选择。状态提升到主标题组件，而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;

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;

从“React”导入React；
从“./UpperMenu”导入UpperMenu；
从“./TopHeader”导入TopHeader；
从“/Header.css”导入样式；
常量节=[
[“/sec0”，“section0”]，
[“/sec1”，“第1节”]，
[“/sec2”，“第2节”]
];
类头扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={section:0，
子菜单：0}；
}
//这里的状态设置正确
单击（事件）{
日志（event.target.id）；
this.setState（{section:event.target.id[8]}，
函数（）{console.log（this.state）；}）；
}
//出现问题时，状态为初始状态
componentDidMount（）{
console.log（this.state）；
}
render（）{
报税表（
);
};
}
导出默认标题；

UpperMenu.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;

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;

从“React”导入React；
从“./UpperMenu.css”导入样式；
从“反应路由器”导入{Link}；
类UpperMenu扩展了React.Component{
render（）{
var activeSection=this.props.activeSection；
var onSectionClick=this.props.onSectionClick；
var截面指数=-1；
返回(

{this.props.sections.map（函数（节））{
sectionIndex++；
报税表（


)})}

);
}
}
导出默认菜单；

---

另外，我已尝试调试生命周期，以确定在哪一点发生这种情况，并且问题开始于组件didmount

这是因为当您单击链接时，页面将重新呈现，因此状态将重置为初始状态

您可以通过将

a

标记更改为

react router

（仍在思考为什么要导入它并使用

a

标记）来解决此问题

说明：

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;

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;

当你点击链接（

a

tag）时，浏览器（而不是

React-Router

）会将你发送到“mysite/sectionX”页面，就像普通的静态网站一样

当浏览器重新呈现新页面时，所有组件的状态都处于初始状态<代码>反应路由器读取URL中的路由并将您路由到该部分的组件

---

如果您使用

链接

，则

反应路由器

（而非浏览器）将负责路由和更改URL，只会重新路由路由组件并保持状态。

嘿，在我修复了渲染问题=）之后，链接更改是我要实现的下一件事。我想在一切都渲染好之后再做。我不知道标签导致了这个问题，链接实际上是解决这个问题的方法，而不仅仅是下一步=）非常感谢！！没问题！人们通常忘记SPA中的路由是由历史API完成的，通常不适用于

a

tag.：）