Creé una aplicación de reacción usando react-hook-speech-to-text . Convierte la voz en texto y envía este texto a una base de datos mongodb a través de un servidor de nodo backend. Si un usuario dice "hola mundo", lo convertirá en una cadena y la almacenará en una matriz llamada resultados . Se suponía que la aplicación que construí enviaría cada cadena una vez a la base de datos, pero envía múltiples solicitudes de recuperación y llena la base de datos con copias innecesarias de la misma cadena. A continuación se muestra el código que he escrito en el archivo App.js. Quiero que solo envíe una solicitud de búsqueda por nueva cadena convertida a texto.

 import React from 'react'; import useSpeechToText from 'react-hook-speech-to-text'; export default function App() { const { error, interimResult, isRecording, results, startSpeechToText, stopSpeechToText, } = useSpeechToText({ continuous: true, useLegacyResults: false, }); if (error) return <p>Web Speech API is not available in this browser 🤷‍</p>; return ( <div className='min-h-screen flex justify-center items-center bg-indigo-400'> <div className='flex flex-col justify-center'> <h1 className='uppercase text-3xl bold text-white text-center'> Recording: {isRecording.toString()} </h1> <button className='bg-white text-indigo-400 px-4 py-2 rounded border-white border-2 transition hover:bg-indigo-400 hover:text-white' onClick={isRecording ? stopSpeechToText : startSpeechToText} > {isRecording ? 'Stop Recording' : 'Start Recording'} </button> <ul> {results.map((result) => { try { fetch('http://localhost:8000/api/commands', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ command: result.transcript }), }) .then((res) => res.json()) .then((myRes) => console.log(myRes)); } catch (error) { console.log('Error posting data: ' + error); } return <li key={result.timestamp}>{result.transcript}</li>; })} {interimResult && <li>{interimResult}</li>} </ul> </div> </div> ); }