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

Question

所以这可能很简单，但我找不到解决方案或正在发生的事情。我正在尝试从 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 函数时，它实际上发生了同样的情况。

我还在学习，这一定是一些我不理解的简单问题，但我花了很长时间才解决这个问题。

Answer 1

你所做的是一个闭包函数，它是一个函数内部的函数你可以在这里找到更多相关信息:https://javascript.info/closure .

您定义函数 sendRecording 的方式不适合这种用法。

应该是这样的:

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

不确定为什么你有一个名为 dispatch 的参数，特别是因为它没有被使用。你现在可以通过简单地调用

来执行这个函数

sendRecording();