React点击按钮先弹提示再跳转触发TypeError错误如何修复

报错根因 #

React 中 useState 提供的状态更新函数（此处为setOpen）是同步执行的，无返回值，因此调用setOpen(true)后得到的是undefined，自然无法调用.then()方法，也就会抛出你遇到的类型错误。

实现方案 #

根据实际需求选择对应方案即可：

方案一：弹窗展示后自动跳转 #

如果你需要弹窗出现后自动执行跳转，可以配合useEffect监听open状态的变化来实现，还可以添加自定义延时让用户有时间看清提示内容：

import React, { useState, useEffect } from 'react';

export default function ProjectCard1() {
  const [open, setOpen] = useState(false);

  // 监听open状态变化，弹窗打开后执行跳转逻辑
  useEffect(() => {
    if (open) {
      // 示例延时1.5秒后跳转，可根据需求调整时长或者直接去掉延时
      const timer = setTimeout(() => {
        window.open("https://project-uts-teori.vercel.app/");
        // 跳转后可主动关闭弹窗
        setOpen(false);
      }, 1500);
      return () => clearTimeout(timer);
    }
  }, [open]);

  const handleClick = () => {
    // 直接更新状态打开弹窗即可，不需要调用then
    setOpen(true);
  };

  const handleClose = (event, reason) => {
    if (reason === 'clickaway') {
      return;
    }
    setOpen(false);
  };

  // 此处保留你原有组件的弹窗、按钮渲染逻辑即可
}

方案二：用户确认弹窗后再跳转 #

如果需要用户主动点击确认按钮后才执行跳转，直接把跳转逻辑绑定到弹窗的确认按钮点击事件上即可：

import React, { useState } from 'react';
// 示例用MUI组件，可替换为你实际使用的弹窗组件
import { Dialog, DialogActions, Button, Alert } from '@mui/material';

export default function ProjectCard1() {
  const [open, setOpen] = useState(false);

  const handleClick = () => {
    setOpen(true);
  };

  const handleClose = (event, reason) => {
    if (reason === 'clickaway') {
      return;
    }
    setOpen(false);
  };

  // 确认按钮触发跳转
  const handleConfirm = () => {
    window.open("https://project-uts-teori.vercel.app/");
    setOpen(false);
  };

  return (
    <div>
      <Button onClick={handleClick}>访问项目</Button>
      <Dialog open={open} onClose={handleClose}>
        <Alert severity="info">即将跳转到外部项目站点</Alert>
        <DialogActions>
          <Button onClick={handleClose}>取消</Button>
          <Button onClick={handleConfirm}>确认跳转</Button>
        </DialogActions>
      </Dialog>
    </div>
  )
}

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