ReactJs:onClick被优先调用

我有两个onClick函数

function VisitGallery(name) {
  const history = useHistory();
  console.log("visitgallery", name)
  history.push("/gallery")
}

function App() {
  const accesstoken = "******************"
  const [viewport, setviewport] = React.useState({
    latitude: ******
    longitude: *******
    width: "100vw",
    height: "100vh",
    zoom: 11
  })

  const [details, setdetails] = React.useState([
  ])

  React.useEffect(() => {
    const fetchData = async () => {
      const db = firebase.firestore()
      const data = await db.collection("data").get()
      setdetails(data.docs.map(doc => doc.data()))
    }
    fetchData();
  }, [])

  const [selectedpark, useselectedpark] = React.useState(null);

  React.useEffect(() => {
    const listener = e => {
      if (e.key === "Escape") {
        useselectedpark(null);
      }
    };
    window.addEventListener("keydown", listener)

    return () => {
      window.removeEventListener("keydown", listener)
    }
  }, [])


  return (
    <div className="App">
      <ReactMapGl {...viewport}
        mapboxApiAccessToken={accesstoken}
        mapStyle="mapbox://**************"
        onViewportChange={viewport => {
          setviewport(viewport)
        }}>

        {details.map((details) =>
          <Marker key={details.name} latitude={details.lat} longitude={details.long}>

            <button class="marker-btn" onClick={(e) => {
              e.preventDefault();
              useselectedpark(details);
            }}>
              <img src={icon} alt="icon" className="navbar-brand" />
            </button>

          </Marker>

        )}

        {selectedpark ?
          (<Popup
            latitude={selectedpark.lat}
            longitude={selectedpark.long}
            onClose={() => {
              useselectedpark(null);
            }}
          >
            <div>

              <Card style={{ width: '18rem' }}>
                <Card.Body>
                  <Card.Title>{selectedpark.name}</Card.Title>
                  <Card.Text>
                    {selectedpark.postalcode}
                  </Card.Text>
                  <Button variant="primary" onClick = VisitGallery() >Visit Gallery</Button>
                </Card.Body>
              </Card>
            </div>
          </Popup>)
          : null}
        {
          console.log("in render", details)
        }

      </ReactMapGl>

    </div>
  );
}

export default App;

函数VisitGallery（名称）{
const history=useHistory（）；
控制台日志（“visitgallery”，名称）
历史。推送（“/gallery”）
}
函数App（）{
const accesstoken=“***********************”
const[viewport，setviewport]=React.useState({
纬度：******
经度：*******
宽度：“100vw”，
高度：“100vh”，
缩放：11
})
const[details，setdetails]=React.useState([
])
React.useffect（（）=>{
const fetchData=async（）=>{
const db=firebase.firestore（）
const data=await db.collection（“data”）.get（）
setdetails（data.docs.map（doc=>doc.data（））
}
fetchData（）；
}, [])
常量[selectedpark，useselectedpark]=React.useState（null）；
React.useffect（（）=>{
const listener=e=>{
如果（e.key==“Escape”）{
useselectedpark（空）；
}
};
window.addEventListener（“向下键”，侦听器）
return（）=>{
window.removeEventListener（“向下键”，侦听器）
}
}, [])
返回(
{
设置视口（视口）
}}>
{details.map（（details）=>
{
e、 预防默认值（）；
使用选定的公园（详细信息）；
}}>
)}
{选择公园？
( {
useselectedpark（空）；
}}
>
{selectedpark.name}
{selectedpark.postalcode}
参观画廊
)
：null}
{
log（“在渲染中”，详细信息）
}
);
}
导出默认应用程序；

首次创建标记时，将分配外部onClick，单击该标记时，将调用useselectedpark函数，然后将详细信息分配给selectedpark

内部onClick被分配给函数VisitGallery（）。当触发内部onClick时，我想导航到另一个页面，即history.push（）

理想情况下，我希望它发生的是，当外部onClick被触发时，cardview显示，我可以选择访问下一页，这可以通过卡中的onClick触发然而，现在发生的是当我点击缩略图时，两次点击都会被触发。我如何修复它，使它成为我理想的状态

---

ps：如果我的解释令人困惑，一定要让我知道，我会相应地编辑它

尝试将第二次onClick添加到回调函数中

<Button variant="primary" onClick='()=>{ VisitGallery() }' >Visit Gallery</Button>

访问图库

因此，在触发单击之前，它不会自动调用该函数