React中useState管理react-audio-voice-recorder录制音频返回null问题

你遇到的核心问题是recordedAudio状态在提交时仍为null，大概率和react-audio-voice-recorder库的触发逻辑、状态更新稳定性有关，以下是具体排查点和修复方案：

1. 确认onRecordingComplete的触发条件 #

react-audio-voice-recorder的onRecordingComplete并非在停止录制时触发，而是需要用户点击组件自带的保存按钮后才会执行回调。如果只停止录制却未点击保存，handleRecordingComplete根本不会被调用，自然recordedAudio会保持初始的null状态。

测试步骤：录制一段音频后，点击组件上的保存按钮，查看控制台是否输出Recording completed:日志，确认setRecordedAudio是否执行。

2. 用useCallback稳定回调函数引用 #

你的handleRecordingComplete是组件每次重渲染时都会重新创建的新函数，可能导致AudioRecorder组件无法正确绑定回调（尤其当库内部做了性能优化时）。用useCallback包裹回调，保持函数引用稳定：

import React, { useState, useCallback } from 'react';
// ...其他导入代码

const Register = () => {
  const [username, setUsername] = useState('');
  const [recordedAudio, setRecordedAudio] = useState(null);

  // 用useCallback包裹回调
  const handleRecordingComplete = useCallback((blob) => {
    console.log("Recording completed:", blob);
    setRecordedAudio(blob);
  }, []); // useState的setter是稳定引用，无需加入依赖

  // ...其他函数定义
};

3. 增加状态可视化调试 #

在组件中添加状态显示，实时确认recordedAudio是否被正确更新：

return (
  <div>
    {/* ...原有内容 */}
    <Typography variant="body1" style={{margin: '10px 0'}}>
      录制状态：{recordedAudio ? '已完成录制' : '未录制'}
    </Typography>
    <Button variant="contained" color="primary" onClick={handleSubmit}>
      Submit
    </Button>
  </div>
);

通过直观的状态显示，可快速排除提交逻辑本身的问题。

4. 检查Blob的有效性 #

如果保存后recordedAudio仍为null，可在handleRecordingComplete中检查blob是否为有效对象：

const handleRecordingComplete = useCallback((blob) => {
  console.log("Blob类型:", typeof blob);
  console.log("Blob大小:", blob?.size);
  if (blob && blob.size > 0) {
    setRecordedAudio(blob);
  } else {
    console.error("获取到无效的音频Blob");
  }
}, []);

确保库返回的是有效Blob对象，避免因空Blob导致状态未更新。

验证流程 #

1. 点击录制按钮开始录音
2. 点击停止按钮结束录音
3. 点击组件上的保存按钮（通常为磁盘样式图标）
4. 确认页面“录制状态”变为“已完成录制”
5. 点击Submit按钮，此时recordedAudio应能正确获取到Blob对象

内容的提问来源于stack exchange，提问作者Nirmal Sankalana