所以这可能很简单,但是我找不到解决方案或正在发生的事情。我正在尝试从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函数时,实际上发生的情况相同。
我还在学习,这一定是我不了解的简单事物,但是解决这个问题需要花费我很多时间。
答案 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)
非常感谢大家! 我不知道我在那里做什么^^“
因为我正在使用该调度程序,但是在将其发布到此处之前我删除了一些代码,但是忘记了删除调度程序。
反正效果很好,谢谢。