Question

我在很多地方都在研究这个问题，但仍然不了解其背后的实际原因。以下是我研究的一些参考资料：

可复制链接：https://codesandbox.io/s/funny-hooks-idqo2?file=/src/App.js （要查看警告，您需要转到关于页面或任何页面并刷新浏览器）

还有许多其他问题。虽然我理解所有这些导致同一问题的原因，但我不明白问题究竟是什么？

这是我的代码，我使用的是 react-redux：

import Aux from "./hoc/Auxilary";
import HeaderPage from "./Components/HeaderPage";
import HomePage from "./Components/Pages/Home/Home";
import AboutPage from "./Components/Pages/About/AboutPage";
import {BrowserRouter,Switch,Route} from "react-router-dom";
import {connect} from "react-redux";
import { Component } from "react";

class App extends Component {

  state = {
    activeLink: null
  }

  componentDidMount() {
    this.setState({...this.state,activeLink:this.props.global.activeNavBar});
  }

  render()
  {
  return (
    <Aux>
        {/*<img src={logo} className="App-logo" alt="logo" />*/}
        <BrowserRouter>
        <HeaderPage Active = {this.state.activeLink}/>
        <Switch>
        <Route exact path="/">
          <HomePage />
        </Route>
        <Route exact path="/about" render={() => {
          this.props.onIndirectLink("About");
          return <AboutPage / >
        }}/>
        <Route exact path="/credits" render={() => {
          this.props.onIndirectLink("Credits");
          return <div>Credits</div>
        }}/>
        <Route exact path="/contact" render={() => {
          this.props.onIndirectLink("Contact");
          return <div>Credits</div>
        }}/>
      </Switch>
        </BrowserRouter>
    </Aux>

  );
  }
}

const mapStateToProps = state => {

  return {

    global:state.appGlobal
    
  };
}

const mapDispatchToProps = dispatch => {

  return {

    onIndirectLink: (key) => dispatch({type: "INDIRECTLINK",payload: {key: key}})

  };

}

export default connect(mapStateToProps, mapDispatchToProps)(App);

这是我的活动组件：

import React, { Component } from "react";
import logo from "../../assets/logo.png";
import classes from "./Headers.module.css";
import Button from "../ui/Button";
import {withRouter} from 'react-router-dom';
import {connect} from "react-redux";

//https://www.w3schools.com/charsets/ref_utf_symbols.asp
class DesktopHeader extends Component {

    state = {
        activeStyle: {color: "#00B0F0",borderBottom: "1px solid red"},
        inactiveStyle: {color: "#fff",borderBottom: "none"},
        itemList: {About:"About",Contact:"Contact",Credits:"Credits"},
        routelist:{About:"about",Contact:"contact",Credits:"credits"}
    }

    navBarClickHandler = (key) => {
        this.props.onClickUpdate(key);
        this.setState({});
        this.props.history.push(`/${this.state.routelist[key]}`);

    }

    render()
    {
        const renderLinks = Object.keys(this.state.itemList).map(element => {

            if(this.props.global.activeNavBar === element)
            return <div className = {classes.NavigationContent} 
            key = {element}
            style = {this.state.activeStyle}
            onClick = {() => this.navBarClickHandler(element)}
            >{this.state.itemList[element]}</div>
            else
            return <div className = {classes.NavigationContent}
            key = {element}
            onClick = {() => this.navBarClickHandler(element)}
            >{this.state.itemList[element]}</div>

        });
        return (
            <div className = {classes.CompleteHeader}>
            
                    <div className = {classes.LogoAndLogin}>

                            <div className = {classes.LogoClass}>
                            <img src={logo} onClick = {() => {
                                this.props.onClickUpdate(null);
                                this.props.history.push("/");
                            }} 
                            className = {classes.LogoImage} alt = {"Logo"}/>
                            </div>
                            <div className = {classes.LoginButtonContainer}>
                            <Button className = {[classes.LoginButton,classes.Dark].join(" ")}>Login</Button>
                            </div>
                    </div>


                    <div className = {classes.NavigationLinks}>

                                {renderLinks}


                    </div>

            </div>
        );
    }

}

const mapStateToProps = state => {

    return {
  
      global:state.appGlobal
      
    };
}

const mapDispatchToProps = dispatch => {
  
    return {
  
      onClickUpdate: (key) => dispatch({type: "INDIRECTLINK",payload: {key: key}})
  
    };
  
  }

export default connect(mapStateToProps,mapDispatchToProps)(withRouter(DesktopHeader));

我无法理解到底哪里出了问题？

我的 HeaderPage 有三个导航链接，如下所示：

import React, { Component } from "react";
import HeaderDesktop from "./Headers/HeaderDesktop";
import HeaderMobile from "./Headers/HeaderMobile";
import {withRouter} from 'react-router-dom';
class HeaderPage extends Component {

    state = {

        deviceType: "Desktop",

    };

    componentDidMount() {
        window.addEventListener("resize", this.resize.bind(this));
        this.resize();
    }
    
    resize() {
        const windowWidth = window.innerWidth;
        let deviceType = "Desktop";
        if(windowWidth <= 400)
        {
            deviceType = "Mobile";
        }
        else if(windowWidth > 400 && windowWidth <= 540)
        {
            deviceType = "Tablet";
        }
        this.setState({...this.state,deviceType: deviceType});
    }
    
    componentWillUnmount() {
        window.removeEventListener("resize", this.resize.bind(this));
    }

    render()
    {
        
        if(this.state.deviceType !== "Mobile")
        return <HeaderDesktop Active = {this.props.Active}/>
        else
        return <HeaderMobile Active = {this.props.Active}/>
        
    }

};

export default withRouter(HeaderPage);

以下是该问题的示例：

渲染不同的组件（`Router.Consumer`）时无法更新组件（`Connect（withRouter（DesktopHeader））`）

0 个答案: