无法在类中调用钩子 - 做出反应

Question

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

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

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 函数不是一个组件（它不返回 React 元素），它被认为是您在作为类组件的父元素内调用钩子。

如果您希望 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 中创建它。