React中点击事件下如何正确将当前路径名设置为组件状态？路径状态更新异常问题问询

我来帮你理清楚这个问题的根源，然后一步步解决它～

你遇到的核心问题是：路由切换后，组件状态里的Link没有同步更新，导致点击时虽然想设置当前页面的路径，但实际拿到的是旧路径，最终状态更新出错。下面是具体的解决方案：

1. 先合并多次setState调用 #

React会批量合并多次setState的调用，分开写不仅没必要，还可能导致异步更新的状态不一致。把三个状态更新合并成一次：

ConInd = () => {
  // 先拿到当前路径，再统一更新状态
  const currentPath = window.location.pathname;
  this.setState({
    Country: "in",
    Link: currentPath,
    dropText: "India"
  });
};

2. 监听路由变化，同步更新状态 #

问题的关键在于：当你切换到/technology页面时，组件的state.Link还停留在之前的/sports，因为组件没有感知到路由变化去更新状态。我们可以借助React Router的能力来监听路由变化：

类组件方案（适配你的代码） #

首先用withRouter高阶组件包裹你的组件，这样就能在props里拿到权威的路由location对象（比直接用window.location更可靠），然后在路由变化时同步更新状态：

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

class YourParentComponent extends React.Component {
  constructor(props) {
    super(props);
    // 初始化时就用当前路由路径设置Link
    this.state = { 
      Country: "in", 
      Link: props.location.pathname, 
      dropText : "Select Country" 
    };
  }

  // 监听路由变化，一旦路径更新就同步状态
  componentDidUpdate(prevProps) {
    if (prevProps.location.pathname !== this.props.location.pathname) {
      this.setState({
        Link: this.props.location.pathname
      });
    }
  }

  ConInd = () => {
    // 用props里的location对象获取路径，避免全局window的同步问题
    this.setState({
      Country: "in",
      Link: this.props.location.pathname,
      dropText: "India"
    });
  };

  render() {
    return (
      // 把状态和方法传给子组件
      <YourDropdownComponent 
        ConInd={this.ConInd} 
        Currlink={this.state.Link} 
      />
    );
  }
}

// 用withRouter包裹，注入路由相关props
export default withRouter(YourParentComponent);

3. 优化Link组件的to属性传递 #

你的下拉菜单里的Link组件，to属性如果是为了跳转到当前页面路径，完全可以直接用props.location.pathname（如果子组件也用withRouter包裹），不用依赖父组件的状态，这样就不会有状态滞后的问题：

// 子组件里的代码
<li>
  <Link 
    className="dropdown-item" 
    onClick={this.props.ConInd} 
    to={this.props.location.pathname} // 直接用当前路由路径
  >
    India
  </Link>
</li>

关键总结 #

• 不要依赖全局window.location获取路径，优先用React Router提供的location对象，确保和路由状态完全同步；
• 路由切换时，一定要让组件感知到变化并更新对应状态，避免状态和实际页面路径脱节；
• 合并setState调用，减少异步更新带来的状态不一致问题。

内容的提问来源于stack exchange，提问作者user17043484