单击时状态不会改变

Question

这是我的组件代码：

import React from "react";
import { useState } from "react";
import { Text, SvgContainer, Svg, Flex } from "../lib/styles";
import Modal from "./Modal";

const Credits = () => {
  const [modal, setModal] = useState(false);
  
  const openModal = () => {
    alert("state should change")
    setModal(true);
    alert("after");

  };
  
  const closeModal = () => {
    setModal(false);
  };

  return (
    <Flex>
      <Text $SubHeader>Crafted By Michele Staffiere 2023</Text>
      
      <SvgContainer onClick={()=>{openModal()}}>
        <Svg src="/assets/question-mark.svg" />
      </SvgContainer>
      
      <Modal isOpen={modal} Close={closeModal} Open={openModal} />
    </Flex>
  );
};

export default Credits;

我正在尝试使用此元素切换模式的状态：

<SvgContainer onClick={()=>{openModal()}}>
    <Svg src="/assets/question-mark.svg" />
</SvgContainer>

问题是

openModal()

函数根本没有更新我的状态——它仍然是错误的。我的警报在

setModal(true)

之前和之后触发，那么为什么我的状态在我的开发工具中保持为

false

？这导致我的模式从未真正弹出在页面上。

当我进入开发工具并手动将状态设置为

true

时，我的模态打开正常，当我单击模态区域之外时，关闭模态功能也正常工作。

为什么是我的：

const openModal = () => {
  alert("state should change")
  setModal(true);
  alert("after");
};

根本不更新状态？

Answer 1

问题在于如何传递回调函数。正确的变体之一是：

<SvgContainer onClick={openModal}>

或

<SvgContainer onClick={() => openModal()}>

查看更多 React 文档（陷阱章节）：https://react.dev/learn/responding-to-events