React+Socket.io聊天应用出现Too many re-renders重渲染错误怎么解决

AI 小北

2026-9-29

问题原因及修复方案

核心错误（导致无限重渲染）

你在SEND按钮的onClick事件中直接执行了addChat函数，而非将函数引用绑定给点击事件：

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

这段代码会在组件每次渲染时立即执行addChat，而addChat内部调用了setMsg("")触发状态更新，状态更新又会触发组件重新渲染，重新渲染又会再次执行addChat，形成无限循环，最终触发Too many render报错。

修复方法

将onClick={addChat()}改为onClick={addChat}，仅传递函数引用，点击时才会执行：

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

其他需要优化的潜在问题

列表渲染的key属性应该绑定到map返回的最外层根元素上，而不是内部的h4标签，避免渲染异常：

{chat.map((msg_obj) => {
  return (
  <span className="Block" key={msg_obj.id}>
    <h4>{msg_obj.name}</h4>
    <p> {msg_obj.msg} </p>
  </span>
  )
})}

表单默认提交行为会刷新页面，建议给表单绑定onSubmit事件阻止默认行为，或者给所有按钮添加type="button"属性避免触发表单提交。

useEffect中的socket事件监听没有做清理，组件卸载时会出现内存泄漏，建议在useEffect的返回函数中移除监听：

useEffect(() => {
  const onConnect = () => console.log(`Connected`);
  const onMessage = (msg_obj) => ChatList(msg_obj);
  socket.on("connect", onConnect);
  socket.on("message", onMessage);
  
  // 清理函数
  return () => {
    socket.off("connect", onConnect);
    socket.off("message", onMessage);
  }
}, []);