javascript - 为什么功能从未达到？

因此，这可能很简单，但是我找不到解决方案或正在发生的事情。我正在尝试从handleRecorder函数内的事件处理程序调用sendRecording。但是sendRecording从未达到：

import React from 'react';
import axios from 'axios';

declare var MediaRecorder: any;

const sendRecording = () => async dispatch => {
  console.log('3');
  const config = {
    headers: {
      'Content-Type': 'application/json'
    }
  };
  const body = JSON.stringify({});
  try {
    const res = await axios.post('/api/recording', body, config);
  } catch (err) {
    const errors = err.response.data.errors;
  }
};

const handleRecorder = () => {
  console.log('1');
  sendRecording();
  navigator.mediaDevices.getUserMedia({ audio: true }).then(stream => {
    const mediaRecorder = new MediaRecorder(stream);
    mediaRecorder.start();

    const audioChunks: any[] = [];
    mediaRecorder.addEventListener('dataavailable', event => {
      audioChunks.push(event.data);
    });

    mediaRecorder.addEventListener('stop', () => {
      console.log('2');
      sendRecording();
    });

    setTimeout(() => {
      mediaRecorder.stop();
    }, 3000);
  });
};

const Recorder = () => {
  return (
    <div>
      <button className='btn' onClick={handleRecorder}>
        <i className='fa fa-microphone' title='Record' />
      </button>
    </div>
  );
};

export default Recorder;

当我单击按钮时，控制台将打印：
1个
2
但是永远不要3

当我从handleRecorder函数的开头调用sendRecording函数时，实际上发生的情况相同。

我仍在学习，这一定是我不了解的简单事物，但是解决这个问题需要花费我很多时间。

最佳答案

您所做的是一个闭包函数，它是一个函数内部的函数
您可以在此处找到有关此内容的更多信息：https://javascript.info/closure。

您定义函数sendRecording的方式对此用法不正确。

应该是这样的：

const sendRecording = async (dispatch) => {
...
}

不知道为什么会有一个称为dispatch的参数，尤其是因为它没有被使用。
您现在可以通过简单地调用来执行此功能

sendRecording();