我试图在单击按钮时显示消息警报

Question

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


  const handleClick = () => {
    setOpen(true).then(response => {
      window.open("https://project-uts-teori.vercel.app/");
    });

  };

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

它表示TypeError：无法读取未定义的属性（读取'then'）。我需要先显示警报消息，然后再打开窗口。打开站点。

Answer 1

使用useState钩子设置值时，它不会返回promise，这意味着您不能使用.then语法。相反，您需要使用useffect钩子并添加open作为依赖项。

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

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

  React.useEffect(() => {
    if (open) {
      window.open("https://project-uts-teori.vercel.app/");
    }
  }, [open])

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

这样，每次open变量更改时都会调用useffect函数，并且只有当值为true时，它才会重定向用户。