Estoy usando la API de Google Speech-To-Text para responder preguntas de mi página web usando el habla del usuario. En este caso, he creado todas las funciones del lado del servidor Node JS correctamente, cuando inicio la API, el servidor envía el texto del discurso constantemente al cliente usando webSockets. Mi problema está en el archivo React JS client.js. Cuando se recibe el texto de voz al cliente desde el servidor , useEffect no actualiza el campo de texto (etiqueta de entrada) del navegador web.
archivo cliente.js
import io from 'socket.io-client'; import React from 'react'; import ReactDOM from 'react-dom'; import { useEffect, useState } from 'react'; const socket = io('http://localhost:3000', { transports: ['websocket', 'polling'] }); const App = ({}) => { const [data, setData] = useState([]); useEffect(() => { socket.on('speech', textOfSpeech => { setData(currentData => [...currentData, textOfSpeech ]); }); }, []); return ( <div> <h1>Message</h1> <input id="text-field" type="text" value={data.join('')}/> </div> ); }; ReactDOM.render(<App />, document.getElementById('root')); ```Cuando actualizo la página web, todo el texto de voz se muestra en el campo #text-field , sin actualizar la página web no puedo obtener el texto de voz. Ayúdenme a actualizar el campo de #texto sin actualizar la página web .
No olvide que para que useEffect cualquier cambio en su estado, debe pasarle un puntero a través de la matriz de dependencia.
const [data, setData] = useState([]); useEffect(() => { socket.on('speech', textOfSpeech => { setData(currentData => [...currentData, textOfSpeech ]); }); }, [data]); Eche un vistazo a los documentos para comprender mejor cómo funciona useEffect "bajo el capó" :)
Por el contrario, hijo, su código es correcto, no necesita depender de la matriz de dependencia, ya que hará que el enlace se ejecute cada vez que cambie la dependencia y, en efecto, eso causará múltiples registros del mismo controlador para el discurso y eso a cambio hará que su controlador de eventos de voz se multiplique con un solo evento, lo que no es bueno.
con sus códigos, puede iniciar una depuración simple como
socket.on('speech', speech => { // console.log('does this receive speech')? });es decir, ¿se ejecuta el evento de socket?... comienza allí. prueba diferentes navegadores, pero tus códigos están bien, hijo.
si la consola funciona, podemos empezar a pensar en el gancho