Блог

Привет, ребята, я хочу превратить речь в текст в компоненте 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;

 

Именно из-за этой линии 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 
 

Похоже, вы установили последнюю версию, но пытаетесь использовать ее по-старому.

Пожалуйста, ознакомьтесь с этим руководством по миграции