如果我添加 onClick 到 div 整个网站没有显示

Question

我目前在一个座位预订网站上工作。我想添加一个事件监听器，这样当它被点击时，它可以调用将存储div值的函数。然而，每当我在网站的整个内容中添加onClick事件时，都不会显示(只显示一个空白页面(。我的代码有问题吗？另外，我还没有反应过来，所以如果可能的话，你们能解释一下你们的答案吗。。。？

这是我的代码

import React, { useState } from "react";
const Ticketing = () => {
const [seat1, selectSeat1] = useState();
const [seat2, selectSeat2] = useState();
const [performance, selectPerformance] = useState("");
const [seat, selectSeat] = useState("");
return(
<form>
<div onClick={selectPerformance("Performance1")}>
Performance 1
</div>
<div>
Performance 2
</div>
<row>
<div>
1
</div>
<div>
2
</div>
<div>
3
</div>
<div>
4
</div>
<div>
5
</div>
<div>
6
</div>
</row>

</form>
)
};
export default Ticketing;

---

import React, { useState } from "react";
import { HashRouter as Router,Route,Switch } from "react-router-dom";
import Auth from "routes/Auth";
import Home from "routes/Home";
import Navigation from "components/Navigation";
import Mypage from "routes/Mypage";
import { Redirect } from 'react-router';
import Ticketing from "routes/Ticketing";

const WebRouter = ({isLoggedIn}) => {
return (
< Router>
{isLoggedIn && <Navigation/> }
<Switch>
{isLoggedIn? (
<>
<Route exact path="/Home">
<Home/>
</Route>
<Route exact path="/Mypage">
<Mypage/>   
</Route>
<Route exact path="/Ticketing">
<Ticketing/>   
</Route>
</>
) : (
<>
<Route exact path="/">
<Auth/>
</Route>
<Redirect from = "*" to="/"/>
</>
)}
</Switch>
</Router>
);
};
export default WebRouter;

Answer 1

我认为问题出在Click函数上。用这段代码替换它。

<div onClick={() => selectPerformance("Performance1")}>
Performance 1
</div>

Answer 2

onClick事件绑定错误，您应该向onClick传递一个函数，但您绑定了selectPerformance函数返回的任何内容。绑定应为：

<div onClick={() => selectPerformance("Performance1")}>
Performance 1
</div>

重新渲染过多的原因：在此react docs链接中(https://reactjs.org/docs/state-and-lifecycle.html)在Let’s quickly recap what’s going on and the order in which the methods are called:部分，第4项告诉：

Thanks to the setState() call, React knows the state has changed, and calls the render() method again to learn what should be on the screen.

原因是：当您使用selectPerformance函数更新performance时，由于状态发生了变化，与状态相关的部分会被重新渲染。当状态被重新呈现时，selectPerformance会被再次调用。因此，与状态相关的部分会再次被重新渲染，因此selectedPerformance会再次被调用。因为那个与国家有关的部分。。。无限循环。