Question

我正在使用网站的菜单。单击菜单汉堡包图标时，将出现一个悬停在菜单上的复选框。现在，我想在单击链接并转到另一个页面后隐藏菜单。但是菜单没有关闭，菜单后面的页面发生了变化，这很好。我设置了一个将复选框状态更改为false的函数，但单击链接时它不会隐藏菜单。

constructor(props) {
  super(props);
  this.state = {
    hamburger: false
  };
  this.turnOff= this.turnOff.bind(this);
}

turnOff = (e) => {
    this.setState({hamburger:false});
}

在render（）中，我有：

<input name="hamburger" type="checkbox" id="menuToggle" onChange={this.handleChange} checked={this.state.hamburger} className="menu-toggle-input"></input>
<Link to="/about" onClick={this.turnOff}>About</Link>

当我单击链接时，它会在后台加载页面，但菜单无法关闭，并且在控制台中出现错误：

无法在未安装的组件上执行React状态更新。

Answer 1

问题是这个

<Link to="/about" onClick={this.turnOff}>About</Link>

在您使用Link的情况下，单击onClick={this.turnOff}时，它不会等到任何关联的单击处理程序执行完毕。它将直接导航到路径为/about的组件和您的组件unmounts。在组件unmounts之后，您的turnOff函数试图更改状态，这是不可能的。

您可以使用简单的Link（样式为链接）代替button，

<button onClick={this.turnOff}>About</button>

您可以在setState的Redirect中使用react-router-dom包中的callback。

您的功能应该是

turnOff = (e) => {
    this.setState({hamburger:false}, () => <Redirect to="/about" />);
}

更新

您可以使用history对象，

turnOff = (e) => {
    this.setState({hamburger:false}, () => this.props.history.push('/about'));
}

您需要从withRouter导入react-router-dom并将其组件包装起来。

import { withRouter } from 'react-router-dom';


export default withRouter(Your_Component_name)

隐藏菜单并在单击react-router链接时重定向

1 个答案: