React error - Hooks can only be called inside of the body of a function component-CodePudding

i have the following jsx file in my react project. I just want to import the speechRecognition function and display what the user is saying on the page:

import React from 'react';
import 'babel-polyfill';
import SpeechRecognition, { useSpeechRecognition } from 'react-speech-recognition';

export const AuthPage = () => {
    const { transcript, resetTranscript } = useSpeechRecognition();

    return (
        <main className='simple-wrapper'
            <div className='simple-section'>
                <button onClick={SpeechRecognition.startListening}>Open</button>
                {transcript}
        
            </div>
        </main>
    );
};

However i am getting the following error:

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component

Do I have to create a new component for my this? or do i just declare the function somewhere else?

EDIT

How can i get the string of what the user has said when speech recognition is on? it says transcript is undefined, how can i define it?

Here is my code:

export const AuthPage = () => {

    const onOpen = () => {
        SpeechRecognition.startListening;
        console.log(transcript);
    };

    return (
        <main className='simple-wrapper'>
            <div className='simple-section'>
                <button onClick={onOpen}>Open</button>
            </div>
        </main>
    );
};

CodePudding user response：

About your first error, I think your code doesn't have any problem, it might be an issue about your installed packages.

I suggest to deletenode_modules folder and ensure that in your package.json file, the versions of react, react-dom, react-speech-recognition and others are correct and there are no version conflicts between them, then run npm install to install deps again and after that test your code.

About your second error, the first thing I see is your useEffect doesn't have any dependency list:

useEffect(() => {
        if (activeListening) {
            SpeechRecognition.startListening;
        }
    });

This useEffect depends on value of activeListening and SpeechRecognition, so try this:

useEffect(() => {
        if (activeListening) {
            SpeechRecognition.startListening;
        }
    }, [activeListenting, SpeechRecognition]);

Happy coding!

CodePudding user response：

Edit2: When you are calling onOpen you are immediately calling the transcript which has yet to receive any input. This also only logs the transcript on button click in your implementation.

const onOpen = () => {
        SpeechRecognition.startListening;
    };

useEffect(() => {
if(transcript != '') console.log(transcript)}, [transcript]);

This should only log the transcript on transcript change and the button should activate the listening of the transcript. Also implemented a check to make sure the transcript has to be defined first.

Edit: if you just want the button to start listening and not stop you can only call onClick = {()=>{SpeechRecognition.startListening}} and ignore the rest

Yeah you'll likely have to move that outside of the return. Consider using a state that's a boolean [activeListening, setActiveListening] and then a useEffect which tracks activeListening.

Inside of that useEffect, if (activeListening) {SpeechRecognition.startListening}

This way you can call onClick = () => {setActiveListening(!activeListening)} in the button and effectively separate the functionality of the listening away from the button alone. This also toggles the listening state on click.