default is not a function React类型错误

Question

大家好，我想在 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 i 运行中它是这样的（如果这是必要的）：

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;

Answer 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

default is not a function React类型错误

default is not a function React Type error

typeerror

speech-to-text

reactjs