默认不是函数反应类型错误答案

【问题标题】：default is not a function React Type error默认不是函数反应类型错误
【发布时间】：2021-08-20 12:58:43
【问题描述】：

大家好，我想在 React 组件中对文本进行语音。但是当我运行它时，我得到了这个错误： react_speech_recognition__WEBPACK_IMPORTED_MODULE_1___default(...) is not a function 谁能告诉我该怎么做？

import React, { Component } from 'react'
import SpeechRecognition from 'react-speech-recognition'

class Mic extends Component {
  render() {
    const { transcript, resetTranscript, browserSupportsSpeechRecognition } = this.props

    if (!browserSupportsSpeechRecognition) {
      return null
    }
    
    return (
      <div>
        <button onClick={SpeechRecognition.startListening}>Start</button>
        <button onClick={SpeechRecognition.stopListening}>Stop</button>
        <button onClick={resetTranscript}>Reset</button>
        <p>{transcript}</p>
      </div>
    )
  }
}

export default SpeechRecognition(Mic)

在 app.js 中我像这样运行它（如果有必要）：

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Container from './components/container/Container';
import Database from './components/database/Database';
import Mic from './components/mic/Mic';
import Test from './components/test/Test';

function App() {
  return (
    <Mic/>
    //<Test/>
  );
}

export default App;

【问题讨论】：

标签： reactjs typeerror speech-to-text

【解决方案1】：

是因为这条线 SpeechRecognition(Mic) 。错误指出模块的默认导出不是函数，这意味着 SpeechRecognition 不是函数，因此您不能调用它。

将您的代码更改为

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

const Mic = () => {
  const { transcript, resetTranscript } = useSpeechRecognition()

  if (!SpeechRecognition.browserSupportsSpeechRecognition()) {
    return null
  }

  return (
    <div>
      <button onClick={SpeechRecognition.startListening}>Start</button>
      <button onClick={SpeechRecognition.stopListening}>Stop</button>
      <button onClick={resetTranscript}>Reset</button>
      <p>{transcript}</p>
    </div>
  )
}
export default Mic

看起来您已经安装了最新版本，但尝试以旧方式使用它。

请看看这个Migration Guide

【讨论】：