React中mediaDevice变更后实现组件更新的方法

你的现有实现完全没有关联“麦克风下拉选中值”和“音频流获取”两个动作：

• 写的useEffect是空依赖数组，只会在组件第一次挂载时拉取一次系统默认麦克风的流，后续下拉选择任何设备都不会触发流的更新。
• 拉取流的配置只传了audio: true，没有指定要使用的设备ID，即使后续触发拉流，也只会拿到默认设备的流，不是用户选中的设备。
• 没有做旧音频流的释放逻辑，切换设备后旧流还会在后台持续采集，容易引发设备占用提示、权限泄漏的问题。

调整逻辑核心要点 #

• 把当前选中的麦克风设备ID作为useEffect的依赖项，只要用户在下拉框选中新设备，就自动触发拉取对应设备的音频流。
• 调用getUserMedia时，在audio配置中通过deviceId.exact指定要使用的选中设备ID，确保拿到的流匹配用户选择。
• 在useEffect的清理函数中停掉所有旧流的音轨，避免后台资源占用。
• 下拉框绑定value值和当前选中的设备ID保持一致，避免组件渲染时选中值和实际状态不匹配。

修正后完整代码 #

import React, { useState, useEffect } from 'react'
import AudioAnalyser from '../containers/AudioAnalyser'

function DeviceSelectionBody(props) {
    const [audioStream, setAudioStream] = useState(null)
    // 从父组件props中获取当前选中的麦克风ID（对应selectMic方法更新后的状态值）
    const currentSelectedMicId = props.selectedMicId

    useEffect(() => {
        // 没有有效选中设备时直接退出逻辑
        if (!currentSelectedMicId) return
        let activeStream = null

        const fetchMicStream = async () => {
            try {
                // 申请选中设备的音频流，附带常用的音频增强配置
                activeStream = await navigator.mediaDevices.getUserMedia({
                    audio: {
                        deviceId: { exact: currentSelectedMicId },
                        echoCancellation: true,
                        noiseSuppression: true,
                        autoGainControl: true
                    },
                    video: false
                })
                setAudioStream(activeStream)
            } catch (error) {
                // 捕获权限拒绝、设备被占用等异常场景，可自定义错误提示
                console.error('获取目标麦克风音频流失败', error)
            }
        }

        fetchMicStream()

        // 副作用清理：组件卸载、依赖值变化时，释放当前活跃的音频流
        return () => {
            if (activeStream) {
                activeStream.getAudioTracks().forEach(track => track.stop())
            }
            // 同步重置状态，避免残留旧流
            setAudioStream(null)
        }
        // 选中麦克风ID变化时，自动重新拉取对应流
    }, [currentSelectedMicId])

    return (
        <div>
            <p> Select the audio and video devices from the list below:</p>
            <div >
                <label htmlFor="cameraList" className="control-label"><i className="fas fa-video" aria-hidden="true"></i>&nbsp;Camera</label>
                <select className='form-control' id='cameraList' onChange={(e) => props.selectCamera(e.target.value)}>
                    {props.cameraOptions.map((item, index) => {
                        return <option key={index} value={item.value}>{item.text}</option>
                    })}
                </select>
            </div>
            <div >
                <label htmlFor="micList" className="control-label" ><i className="fas fa-microphone"></i>&nbsp;Microphone</label>
                <select 
                    className='form-control' 
                    id='micList' 
                    value={currentSelectedMicId}
                    onChange={(e) => props.selectMic(e.target.value)}
                >
                    {props.micOptions.map((item, index) => {
                        return <option key={index} value={item.value}>{item.text}</option>
                    })}
                </select>
                {audioStream ? <AudioAnalyser audio={audioStream} /> : null}
            </div>
            <div >
                <label htmlFor="speakerList" className="control-label"><i className="fas fa-volume"></i>&nbsp;Speaker</label>
                <select className='form-control' id='speakersList' onChange={(e) => props.selectSpeakers(e.target.value)}>
                    {props.speakersOptions.map((item, index) => {
                        return <option key={index} value={item.value}>{item.text}</option>
                    })}
                </select>
            </div>
        </div>
    )
}

export default DeviceSelectionBody

实现注意事项 #

• 不要在下拉框的onChange回调里直接写拉流逻辑，所有流相关的操作统一收敛到useEffect里，避免逻辑分散导致的状态不同步问题。
• 不要把MediaStream流对象作为useEffect的依赖，该对象的引用不稳定，会触发不必要的重复拉流，只用对应的设备ID做依赖就足够。
• 拉流失败的场景（比如用户拒绝权限、设备被其他应用独占）要做兜底处理，避免组件一直处于加载状态。

注：当前实现只要用户切换下拉框的麦克风选项，选中ID变化就会自动重新申请对应设备的流，把最新的流传给AudioAnalyser组件，完全匹配需要的同步更新效果。

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