Estoy tratando de agregar algo de reconocimiento de voz a mi aplicación de reacción. Si el usuario dice una palabra específica, 'rana', le permite abrir la página siguiente. Sin embargo, estoy atascado al agregar esta línea a mi página, porque es un enlace que no está permitido:
const { transcript, resetTranscript } = useSpeechRecognition();¿Hay alguna manera de agregarlo sin crear un nuevo componente, ya que el botón en esta página necesita saber lo que se ha dicho y si permitir que el usuario continúe?
A continuación se muestra mi código:
export const AuthPage = () => { const navigate = useNavigate(); //THIS LINE IS CAUSING THE HOOK ERROR // const { transcript, resetTranscript } = useSpeechRecognition(); const navigateToNextPage = () => { navigate(`/frogPage/${name}`);}; return ( <main className='simple-wrapper'> <button onClick={SpeechRecognition.startListening}>Say Word</button> //ONLY SHOW NEXT BUTTON IF THEY SAID THE WORD FROG CORRECTLY {transcript.includes("frog") && ( <button onClick={navigateToNextPage}>Next</button>) </main> );};
¡OK! Entonces, probé esto y lo único que da error. Me encontré con useNavigate por alguna razón. Entonces, cambié a react-router-dom@5.2.0 debido a una mayor familiaridad.
Al leer la documentación de NPM para ello ( doc ). Esto también podría depender de su navegador. Por lo tanto, recomienda agregarle polyfill, pero Chrome actualizado debería ser compatible con esto (debido a la Web Speech API).
Estoy usando react-speech-recognition (3.9.0) y react version17.0.2. Además, la biblioteca de reconocimiento de voz de reacción requiere React 16.8 o superior para que se utilicen los ganchos de React.
A continuación se muestra el código completo que funcionó para mí
// AuthPage.js import SpeechRecognition, { useSpeechRecognition } from "react-speech-recognition"; import { useHistory } from "react-router-dom"; const AuthPage = () => { const history = useHistory(); // usehistory in place of useNavigate // const navigate = useNavigate(); const { transcript, resetTranscript } = useSpeechRecognition(); const navigateToNextPage = () => { console.log("This works"); history.push("/homepage"); // navigate(`/frogPage/${name}`); }; return ( <main className="simple-wrapper"> <button onClick={SpeechRecognition.startListening}>Say Word</button> {/* //ONLY SHOW NEXT BUTTON IF THEY SAID THE WORD FROG CORRECTLY */} {transcript.includes("frog") && ( <button onClick={navigateToNextPage}>Next</button> )} </main> ); }; export default AuthPage;Por si acaso quieres probarlo tú mismo. La siguiente es la página de la aplicación que agregué, que debería funcionar y mostrar el botón Decir palabra y después del reconocimiento de voz al decir 'rana', proporciona una forma de navegar a la página de inicio.
// App.js import React from "react"; import AuthPage from "./AuthPage"; import Homepage from "./Homepage"; import { BrowserRouter, Switch, Route } from "react-router-dom"; // const SpeechlySpeechRecognition = createSpeechlySpeechRecognition(appId); // SpeechRecognition.applyPolyfill(SpeechRecognitionPolyfill); export default function App() { return ( <div className="App"> <h1>Hello CodeSandbox</h1> <h2>Start editing to see some magic happen!</h2> <div>{/* <Dictaphone /> */}</div> <BrowserRouter> <Switch> <Route exact path="/"> <AuthPage /> </Route> <Route exact path="/homepage"> <Homepage /> </Route> </Switch> </BrowserRouter> </div> ); } // Homepage.js import React from "react"; const Homepage = (props) => { return <div>Homepage</div>; }; export default Homepage;Además, enlace al enlace de trabajo de la solución. Además, tenga en cuenta que debe permitir su micrófono en la página web :)
a juzgar por sus comentarios, parece que está tratando de usar ganchos dentro de un componente de clase.
solución: crear un componente contenedor
function WrapperComponent({ renderChild }) { const result = useSpeechRecognition(); return renderChild(result) } class MyComponent { render() { return <WrapperComponent renderChild={({ transcript, resetTranscript }) => ( <main className='simple-wrapper'> <button onClick={SpeechRecognition.startListening}>Say Word</button> //ONLY SHOW NEXT BUTTON IF THEY SAID THE WORD FROG CORRECTLY {transcript.includes("frog") && ( <button onClick={navigateToNextPage}>Next</button>) </main> )} /> } }incluso puede usar props.children (como una función) directamente si lo desea. usa lo que sea cómodo.