ReactJs出现Too Many Re-Renders错误，react-speech-recognition麦克风切换异常

错误触发根源 #

你的代码出现Too Many Re-Renders错误的核心原因是麦克风图标的点击事件绑定错误：
你写了onClick={Mic()}，带括号的写法会在组件每次渲染时立即执行Mic函数，而不是等待用户点击时才触发。
Mic函数执行时会修改语音识别的listening状态，状态更新会触发组件重新渲染，重新渲染又会再次执行Mic函数，最终形成死循环，触发重渲染次数超限错误。

需修改的核心点 #

1. 修正点击事件绑定
   将麦克风图标的onClick={Mic()}改为onClick={Mic}，仅传递函数引用，点击时才执行逻辑。

2. 修正麦克风切换逻辑
   你当前的Mic函数逻辑错误，麦克风关闭状态下点击时没有执行开启逻辑，反而调用了中止监听的方法，修改后逻辑如下：

// 替换原Mic函数
const toggleMic = () => {
  if (listening) {
    SpeechRecognition.stopListening()
  } else {
    SpeechRecognition.startListening({ continuous: true })
  }
}

对应修改图标点击事件为onClick={toggleMic}即可。

3. 其他可选优化（避免后续出现其他bug）

• 不要用普通变量存储messages，改用useState存储消息列表，避免手动操作DOM更新消息：

// 顶部引入useState
import React, { useRef, useState } from "react";
// 替换原messages定义
const [messages, setMessages] = useState([{ main: "Hey there! Wassop", class: "left" }]);

• 发送消息后不要直接操作innerHTML更新界面，改用setMessages更新状态触发React自动渲染：

// 替换onSend里手动加innerHTML的逻辑
// 发送自己的消息时
setMessages(prev => [...prev, {main: message, class: 'right'}])
// 收到接口返回时
setMessages(prev => [...prev, {main: response.data.cnt, class: 'left'}])

内容的提问来源于stack exchange，提问作者user16752914