Javascript 按钮组件需要两次单击

我在我的网站上有一个配送表单部分，它的末尾有一个按钮，用来获取表单的值并将这些数据发布到我的后端服务器，但是每当我第一次单击时，没有任何效果，它只在第二次单击时才起作用

这是我的自定义按钮组件

function Button(props) {
  return (
    <div className={props.className}>
      <Link to={props.buttonLink}>
        <button
          className={`${styles.buttonDefault} ${
            props.display ? '' : styles.hideButton
          } ${props.buttonClass}`}
          onClick={props.onClick}
        >
          {props.buttonText}
        </button>
      </Link>
    </div>
  );
}

export default Button;

---

我认为问题可能出在这个地方

    if (firstName && lastName && email && phoneNumber && locale) {
      setValidated(true);
    }

    if (validated) {

请记住，setValidator是一个异步函数，您不能在调用它之后立即依赖它们的值。您有两个选项，要么更改if语句，要么添加侦听已确认更改的useffect钩子

if（firstName&&lastName&&email&&phoneNumber&&locale）{
setValidated（true）；
//在这里打电话给axios
}

或

useffect（（）=>{//此函数仅在“已验证”状态更改后调用
如果（已验证）{
//在这里打电话给axios
}
}，[已验证]）

试试

按钮组件

，这样可以解决双击问题

function Button(props) {
  return (
    <div className={props.className}>
      <Link to={props.buttonLink} component="button" className={`${styles.buttonDefault} ${
            props.display ? '' : styles.hideButton
          } ${props.buttonClass}`}
          onClick={props.onClick}>
          {props.buttonText}
      </Link>
    </div>
  );
}

export default Button;

功能按钮（道具）{
返回(
{props.buttonText}
);
}
导出默认按钮；

为什么要将按钮包装在链接组件内？这非常有效！！非常感谢你！我不知道setState函数是异步的。

    if (firstName && lastName && email && phoneNumber && locale) {
      setValidated(true);
    }

    if (validated) {

function Button(props) {
  return (
    <div className={props.className}>
      <Link to={props.buttonLink} component="button" className={`${styles.buttonDefault} ${
            props.display ? '' : styles.hideButton
          } ${props.buttonClass}`}
          onClick={props.onClick}>
          {props.buttonText}
      </Link>
    </div>
  );
}

export default Button;