反应“无法在'MediaRecorder'上执行'stop'：MediaRecorder的状态为'inactive'” 我想用ReactJS编写一个小型录音网站，但我总是会收到此错误：这是我编写的代码的一部分：

如何解决反应“无法在'MediaRecorder'上执行'stop'：MediaRecorder的状态为'inactive'” 我想用ReactJS编写一个小型录音网站，但我总是会收到此错误：这是我编写的代码的一部分：

我想用ReactJS编写一个小型录音网站，但我总是会收到此错误：

Failed to execute 'stop' on 'MediaRecorder': The MediaRecorder's state is 'inactive'.

这是我编写的代码的一部分：

var [recording,setRecording] = useState(false);
var audiochunks = [];
var mrecorder;

navigator.mediaDevices.getUserMedia({audio:true}).then(stream => {

        mrecorder = new MediaRecorder(stream);
        mrecorder.addEventListener("dataavailable",event => {

            audiochunks.push(event.data);

        });

    })

function toggle_recording(){ setRecording(!recording); handle_record() }

function handle_record(){

        if(recording){
            mrecorder.stop();
        }
        else{
            mrecorder.start();
        }

    }

/**JSX Part of App.js component*/
return(

    <section>

         <button onclick=toggle_recording/>

    </section>

)

按钮将记录状态设置为true或false，并启动或停止MediaRecorder。
是因为我首先拒绝了变量并在getUserMedia函数中对其进行了初始化，是否可能出现错误？
希望你能帮我！

感谢您的建议，
disembleergon