为什么功能从未达到？

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

为什么要发送调度参数？ 尝试将其删除到：

const sendRecording = async () => {
  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;
  }
};

Answer 2

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

您定义函数sendRecording方式不适用于此用法。

应该是这样的：

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

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

sendRecording();

Answer 3

非常感谢大家！ 我不知道我在那里做什么^^“

因为我正在使用该调度程序，但是在将其发布到此处之前我删除了一些代码，但是却忘记了删除调度程序。

无论如何，它都能完美运行，谢谢。