需要点击两次才能更新 react hooks 中的状态。切换按钮

Question

我需要在按钮上单击两次才能更新状态。 我有两个按钮。当我在按钮之间切换时，文本应该会改变。

我发现了一些与此相关的问题，但对我没有用。

请找到下面的代码。

import React,{useState} from "react";
import { BrowserRouter as Router, NavLink } from "react-router-dom";
import './SectionConnect.css';

const SectionConnect = () => {

const [activeButton, setActiveButton] = useState("company");

function toggleButton() {
  setActiveButton(activeButton==="company" ? "individual" : "company");

}



  return (
    <div className="connect-container">
      <div className="connect-wrapper">
        <h2>How it works</h2>
        
    {activeButton==="company"?<p>
          We help your employees maximise potential through a bespoke, science-backed wellbeing platform. 
        </p>:<p>
          We connect you with the very best practitioners and most effective
          methods to achieve optimal health.
        </p>}

        
        <div className="connect-btn">
          <NavLink
            to="/"
            exact
            activeClassName="active-btn"
            className="disable-btn"
           onClick={toggleButton}
          >
            For companies
          </NavLink>
          <NavLink
            to="/forIndividuals"
            exact
            activeClassName="active-btn"
            className="disable-btn"
            onClick={toggleButton}
          >
            For individuals
          </NavLink>
          
        </div>
      </div>
    </div>
  );
};

export default SectionConnect

无法理解我哪里出错了。 提前致谢！

Answer 1

在这样的切换按钮调用onClick={()=> toggleButton()}