在状态更新和样式更改之前，我必须单击我的链接两次

Posted 2023-03-25

【中文标题】在状态更新和样式更改之前，我必须单击我的链接两次

【英文标题】：I have to click on my link twice before state is update and styling is changed

【发布时间】：2022-01-18 13:51:48

【问题描述】：

我有一个问题。我希望我的链接的样式根据状态而改变。但问题是，在更新样式之前，我必须单击链接两次。但是当我使用 e.prevetndefault 时，当我单击链接时会应用样式但我无法转到该页面。这是代码。

function Footer()
    
    const [activeValue, setIsActive] =  useState("0")
    

    return(
        <div className="footer">
    <ul className="socials">
        <li><a href="">     <i className="fab fa-facebook-f"></i>       </a></li>
        <li><a href="">     <i className="fab fa-instagram"></i>        </a></li>
        <li><a href="">     <i className="fab fa-twitter"></i>          </a></li>
        <li><a href="">     <i className="fas fa-podcast"></i>          </a></li>
        <li></li>
        

        <li><Link to="/peepNews"    onClick=()=>setIsActive("1")        style=activeValue=="1"?color:"#0B77BE",fontWeight:"600":null    >Peep News</Link></li>
        <li><Link to="/faq"         onClick=()=>setIsActive("2")         style=activeValue=="2"?color:"#0B77BE",fontWeight:"600":null   >FAQ</Link></li>
        <li><a href="" style=color:"gray", fontWeight:"200">Careers</a></li>
        <li><Link to="/legal"       onClick=()=>setIsActive("3")         style=activeValue=="3"?color:"#0B77BE",fontWeight:"600":null       >Legal</Link></li>
        <li><a href="https://jupeglobal.com/venture-capital/">Jupe Global   </a></li>
        
    </ul>
</div>
       
    );

编辑： 这是我添加 useEffect 钩子的时候。但问题是每当页面重新渲染时，activeValue 都会被设置回默认值（0）而不是 1、2、3 等。

function Footer()
    
    const [activeValue, setIsActive] =  useState("0")
    
    useEffect(() =>  
        
            setIsActive(activeValue)  ;
            alert(activeValue);
            
    
         
     ,[activeValue])

    

    return(
        <div className="footer">
    <ul className="socials">
        <li><a href="">     <i className="fab fa-facebook-f"></i>       </a></li>
        <li><a href="">     <i className="fab fa-instagram"></i>        </a></li>
        <li><a href="">     <i className="fab fa-twitter"></i>          </a></li>
        <li><a href="">     <i className="fas fa-podcast"></i>          </a></li>
        <li></li>
        

        <li><Link to="/peepNews"        onClick=()=>setIsActive("1")    style=activeValue=="1"?color:"#0B77BE",fontWeight:"600":null    >Peep News</Link></li>
        <li><Link to="/faq"         onClick=()=>setIsActive("2")         style=activeValue=="2"?color:"#0B77BE",fontWeight:"600":null   >FAQ</Link></li>
        <li><a href="" style=color:"gray", fontWeight:"200">Careers</a></li>
        <li><Link to="/legal"       onClick=()=>setIsActive("3")         style=activeValue=="3"?color:"#0B77BE",fontWeight:"600":null       >Legal</Link></li>
        <li><a href="https://jupeglobal.com/venture-capital/">Jupe Global   </a></li>
        
    </ul>
</div>
       
    );

【参考方案1】：

使用 react-router，您无需使用 Link 元素导航到新页面，特别是如果您希望功能更复杂一些。

您可以创建历史文件并导出历史对象：

import  createBrowserHistory  from 'history';

export default createBrowserHistory();

然后将历史记录导入您希望使用 javascript 导航的任何文件中。然后在您的文件中，您可以简单地创建一个您可以随意设置样式的文件（或继续与 e.preventDefault() 一起使用），然后在点击操作上导航。

  <li>
    <div
      onClick=() => 
        setIsActive("1");
        history.push("/peepNews");
      
      style=activeValue == "1" ?  color: "#0B77BE", fontWeight: "600"  : undefined >
      Peep News</div>
  </li>

【讨论】：

哇。这令人惊讶的工作！但是有一个问题，我所有的页脚样式都消失了。它变成了一种非常凌乱的风格。我尝试使用 Use Effect 。我想让你看看代码

我不认为你的 useEffect 正在做任何事情，因为它只会在 activeValue 的变化时被调用。我可能会使用条件 CSS 而不是内联样式来管理样式。只要您正确设置了所有内容，useState 就应该保持渲染之间的值。

嘿，它成功了。非常非常感谢你。真的真的很忙。谢谢

我很高兴它有帮助。请记住对您有用的问题的任何答案进行投票和/或标记为正确。谢谢