为什么功能从未达到?

时间:2019-08-14 18:58:23

标签: javascript reactjs typescript axios

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

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

3 个答案:

答案 0 :(得分: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;
  }
};

答案 1 :(得分:1)

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

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

应该是这样的:

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

不确定为什么有一个名为dispatch的参数,尤其是因为它没有使用。 您现在可以通过简单地调用

来执行此功能
sendRecording();

答案 2 :(得分:0)

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

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

反正效果很好,谢谢。