无法在 class 中调用挂钩 - 反应

Question

我正在尝试在我的网站上添加语音识别和他们所说内容的文字记录，用户按下按钮启动麦克风，对着他们的麦克风说话，他们所说内容的文字记录被记录下来，显示在屏幕上。

我在名为 App 的 class 组件中完成所有这些工作，这是我处理语音识别部分的函数：

Dictaphone = () => {
    const {
      transcript,
      listening,
      resetTranscript,
      browserSupportsSpeechRecognition
    } = useSpeechRecognition();
  
    if (!browserSupportsSpeechRecognition) {
      return <span>Browser doesn't support speech recognition.</span>;
    }
  };

在我的 render() 部分，这是我要返回的与我网站的语音识别部分相关的内容：

<p>Microphone: {this.Dictaphone.listening ? 'on' : 'off'}</p>
<button onClick={this.Dictaphone.SpeechRecognition.startListening}>Start</button>
<button onClick={this.Dictaphone.SpeechRecognition.stopListening}>Stop</button>
<button onClick={this.Dictaphone.resetTranscript}>Reset</button>
<p>{this.Dictaphone.transcript}</p>

我收到这个错误：

Failed to compile.

src\App.js
  Line 15:9:  React Hook "useSpeechRecognition" cannot be called in a class component. React Hooks must be called in a React function component or a custom React Hook function  react-hooks/rules-of-hooks

我不确定为什么会收到此错误，但最重要的是，我不知道如何在不使用 useSpeechRecognition() 挂钩的情况下实际实现我想要实现的功能。关于解决这个问题，我能得到一些帮助吗？

Answer 1

错误是简单的挂钩只允许在函数组件内部使用。并且由于 Dictaphone 函数不是组件（它不是 return React 元素），所以它被认为是在调用父元素内部的钩子，父元素是 class 组件。

如果您希望 Dictaphone 成为一个组件，只需在末尾添加 return null。

Dictaphone = () => {
    const {
       transcript,
       listening,
       resetTranscript,
       browserSupportsSpeechRecognition
    } = useSpeechRecognition();

    if (!browserSupportsSpeechRecognition) {
        return <span>Browser doesn't support speech recognition.</span>;
    }
    return null;
};

并在自己的文件中创建它 Dictaphone.jsx.

无法在 class 中调用挂钩 - 反应

Unable to call hooks in a class - react

speech-recognition

reactjs

react-hooks