Javascript Recognition.onresult在react中不起作用

我一直试图在控制台上显示我的结果，但它不起作用

由于某些原因，控制台正在打印“侦听”，但在我完成演讲后不会启动onresult函数

import React, { useEffect, useState } from 'react';
import './App.css';

const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
const recognition = new SpeechRecognition();
recognition.start();

const URL = 'https://www.google.com/search?q=';

export const App = () => {

    const [text, setText] = useState('');
    const [action, setAction] = useState('');

    useEffect(() => {
        recognition.onstart = () => {
            console.log('Listening');
        }

        recognition.onresult = (e) => {
            console.log(e);
        }
    });

    return <div>
        <div>{ action }</div>
        <div>{ text }</div>
    </div>
}

import React，{useffect，useState}来自“React”；
导入“/App.css”；
const SpeechRecognition=window.SpeechRecognition | | window.webkitSpeechRecognition；
const recognition=新的SpeechRecognition（）；
识别。开始（）；
常量URL=https://www.google.com/search?q=';
导出常量应用=（）=>{
const[text，setText]=useState（“”）；
const[action，setAction]=useState（“”）；
useffect（（）=>{
recognition.onstart=（）=>{
console.log（'listing'）；
}
recognition.onresult=（e）=>{
控制台日志（e）；
}
});
返回
{action}
{text}
}

问题是在渲染元素之前就启动了。。

---

相反，我会在

useffect（）

function

中的某种事件中使用它，如果

onend

触发，您尝试过吗