Функция Reactjs отправляет данные i + 1 раз

Этот код запрашивает у пользователя подтверждение для своего аудиоустройства. После нажатия кнопки запускается startRecord (), и начинается запись. stopRecording () останавливает запись, и как только данные становятся доступными, вызывается функция отправки и Blob отправляется на сервер.

Теперь странная часть: каждый раз, когда данные готовы, функция отправки вызывается i + 1 раз. Таким образом, после второй отправки на сервер приложение пытается отправить большой двоичный объект два раза.

Первое время работает безотказно.

Я также могу заставить его работать, когда

    stream = navigator.mediaDevices
  .getUserMedia({ audio: true })
  .then(stream => {
    recorder = new MediaRecorder(stream);
  });

Вызывается внутри startRecording (). Но затем Firefox запрашивает разрешение каждый раз, когда Пользователь нажимает кнопку, что также не является хорошим UX.

Есть ли способ спросить пользователя только один раз без постоянной повторной отправки сообщения? Также странным поведением является то, что слушатель в «dataavailable» запускается только один раз (проверено с помощью console.info ()), но код из отправляющей функции вызывается i + 1 раз.

Я надеюсь кто-нибудь сможет помочь

export class Speech extends React.Component {
  constructor(props) {
    super(props);
     this.state = {
      isRecording: "false"
     };
   }

  componentDidMount() {
   window.MediaRecorder = require("audio-recorder-polyfill");
     if (!window.MediaRecorder) {
       document.write(decodeURI('%3Cscript 
        src = "/polyfill.js">%3C/script>'));
     }
 //I´ve put the navigator.MediaRecorder in the ComponentDidMount, that 
   it only asks the user one time for microphone confirmation.
stream = navigator.mediaDevices
  .getUserMedia({ audio: true })
  .then(stream => {
    recorder = new MediaRecorder(stream);
  });
}

recordHandler(e) {
  e.preventDefault();
  e.stopPropagation();
  let myReader = new FileReader();
  if (this.state.isRecording === "false") {
    // Request permissions to record audio
    if (recorder) {
      // Set record to <audio> when recording will be finished
      recorder.addEventListener("dataavailable", e => {
        blobby = URL.createObjectURL(e.data);
        reader = myReader.readAsText(e.data);

        this.sendMeBaby(e.data);//This is the function that gets 
        called i+1 time after every click (send)


    });
  }
  if (recorder) {
    // Start recording
    recorder.start();
    MessageDisplay.addRecordSign();

    app.updateText();
    console.info("recording started");
    this.startRecording();
    return;
  }
}
if (this.state.isRecording === "true") {
  this.stopRecording();
  return;
}
}

startRecording = () => {
  buttonText = "Recording...";
  this.setState({
    isRecording: "true"
  });
};

stopRecording = () => {
  // Stop recording
  if (recorder) {
    recorder.stop();
    // Remove “recording” icon from browser tab
    recorder.stream.getTracks().forEach(i => i.stop());
  }
  buttonText = "Record";
  this.setState({
    isRecording: "false"
  });
};

sendFunctionWithAjaxCall(){
  sampleCode()
}

render() {
  return (
     <Button
       variant = "contained"
       color = "secondary"

       onClick = {e => {
         this.recordHandler(e);
       }}
     >
       {buttonText}
     </Button>
 );

}