如何通过 setState 一键更改状态值答案

【问题标题】：how can i change the state value with setState with one click如何通过 setState 一键更改状态值
【发布时间】：2021-04-20 07:17:32
【问题描述】：

如何使用 setState 更新 activeUrl 值？

状态是

state = {
   activeUrl: ''
}

功能

const handleActiveMenu = () => {
      let splitUrl = window.location.href.split('/')
      let assignActive = splitUrl[4]
      this.setState({ activeUrl: assignActive })
}

组件

<Link
                className={`${activeUrl === '' ? classes.borderBottom : null}`}
                onClick={() => handleActiveMenu}
                to="/"
              >
                Beranda
              </Link>

              <Link
                className={`${
                  activeUrl === 'profil' ? classes.borderBottom : null
                }`}
                onClick={handleActiveMenu}
                to="/profil"
              >
                Inisiatif
              </Link>

当我尝试 console.log 时，activeUrl 没有改变，但是在我点击 2 次后，值改变了..

【问题讨论】：

this.setState 具有新值就足够了。您在哪里尝试记录状态更新？
嗨！请使用 minimal reproducible example 来更新您的问题，以展示问题，最好是使用 Stack Snippets（[<>] 工具栏按钮）的 runnable 问题。 Stack Snippets 支持 React，包括 JSX； here's how to do one。乍一看，该代码是可以的，但很难说它在哪里（例如，你在哪里创建那个处理函数？）。
登录splitUrl会看到什么？

标签： javascript reactjs

【解决方案1】：

据我所知，点击链接（如果这是来自 react-router-dom 的链接）可能无法正常工作。如果到达 handleActiveMenu，请尝试 log.console 或调试。

除此之外，当我正确解释您的代码时，您希望在单击链接后设置活动 URL -> 您不应该在 Link 组件的 onClick 中执行此操作，请尝试在您调用的组件中执行此操作，例如在 componentDidMount 事件中。

【讨论】：