重新渲染太多.React限制了渲染的数量?套接字.io聊天App.

Question

我正在使用套接字制作一个简单的实时聊天web应用程序。在前端部分，我得到太多的渲染错误尽管我所有的setState都在Component的返回部分之外我已经附上了React前端部分的App.js代码

请原谅我幼稚的态度，我是一个新手程序员，这是我的第一个问题

function App() {
const [name, setName] = useState("");
const [msg, setMsg] = useState("");
const [chat, setChat] = useState([]);
useEffect(() => {
socket.on("connect", () => {
console.log( `Connected`);
});
socket.on("message", (msg_obj) => {
ChatList(msg_obj);
});

}, []);
function ChatList(msg_obj){
setChat((chat) => [...chat, msg_obj]);
}
function addChat () 
{
const id = socket.id;
socket.emit("message", { id, msg, name });
setMsg("");
};
function settingname(tobenamed)
{
setName(tobenamed);
}
function settingmessage(messagevalue)
{
setMsg(messagevalue);
}
return (
<div className="App">
<header className="App-header">
<div className="chat-area">
{chat.map((msg_obj) => {
return (
<span className="Block">
<h4 key={msg_obj.id}>{msg_obj.name}</h4>
<p> {msg_obj.msg} </p>
</span>
)
})}
</div>
<form id="chatter-form">
<input
type="text"
placeholder="Enter username"
className="username-field"
onChange={
(event) => {
settingname(event.target.value);
}
}
/>
<button className="username-submit" >Go</button>
<input
type="text"
placeholder="Enter username"
className="message-field"
onChange={(event) => {
settingmessage(event.target.value);
}}
/>
<button className="message-submit" onClick={addChat()}>SEND</button>
</form>
</header>
</div>
);
}```

Answer 1

您的按钮正在调用addChat，因为它后面有括号。请确保向函数传递一个引用，而不是调用它。

你想要addChat而不是addChat()

<button className="message-submit" onClick={addChat}>SEND</button>