對MediaRecorder物件的參考在函式中未定義，盡管已在先前呼叫的函式中進行了初始化

我正在開發一個 React 應用程式來記錄用戶的音頻和視頻，然后將其提取到后端。

在MediaRecorderComponent下面，該函式initializeDevice要求用戶允許音頻或視頻錄制（通過單擊按鈕呼叫它，因為我們的用戶需要我們的應用程式 UI 盡可能清晰和明確），如果獲得許可，則將mediaRecorder變數初始化為新MediaRecorder物件，接收來自navigator.mediaDevices.getUserMedia承諾的回應作為引數。

import React, { useEffect, useState } from 'react';
import { RecordAudioButton } from '../Components';

type Props = {
    mediaConstraints: MediaStreamConstraints;
};

function MediaRecorderComponent({ mediaConstraints }: Props) {
    const [permissionGranted, setPermissionGranted] = useState(false);
    const [stream, setStream] = useState<null | MediaStream>(null);
    const [isRecording, setIsRecording] = useState(false);

    let mediaRecorder: MediaRecorder;

    const initializeDevice = async () => {
        try {
            const response = await navigator.mediaDevices.getUserMedia(
                mediaConstraints
            );
            setStream(response);
            setPermissionGranted(true);
            mediaRecorder = new MediaRecorder(response);
        } catch (err) {
            setPermissionGranted(false);
            console.log(err);
        }
    };

    const handleRecording = () => {
        if (isRecording) {
            mediaRecorder.stop();
            setIsRecording(false);
        }

        mediaRecorder.start();
        setIsRecording(true);
    };

    return (
        <div>
            {permissionGranted ? (
                <RecordAudioButton
                    isRecording={isRecording}
                    onClick={handleRecording}
                />
            ) : (
                <>
                    <p>
                        CLIENT INSTRUCTIONS
                    </p>
                    <button
                        type="button"
                        onClick={() => initializeDevice()}
                    >
                        Let's start!
                    </button>
                </>
            )}
        </div>
    );
}

稍后，handleRecording作為 props 傳遞給另一個組件，當它div被點擊時呼叫它：

function RecordAudioButton({ isRecording, onClick }: Props) {
    return (
        <div
            className="bg-error text-base-100 rounded-full p-5 shadow-lg"
            onClick={() => onClick()}
        >
        ///... and so on

但是，當單擊按鈕時，我在函式呼叫Uncaught TypeError: Cannot read properties of undefined (reading 'start')時收到觸發，并且變數顯示為，即使它是在用戶授予函式權限時初始化的。handleRecordingmediaRecorder.start()mediaRecorderundefinedinitializeDevice

為什么參考未初始化？

uj5u.com熱心網友回復：

使用 ref 存盤您的值：

    import React, { useEffect, useState, useRef } from 'react';
    ...
    const mediaRecorder = useRef(null);

    const initializeDevice = async () => {
        try {
            const response = await navigator.mediaDevices.getUserMedia(
                mediaConstraints
            );
            setStream(response);
            setPermissionGranted(true);
            mediaRecorder.current = new MediaRecorder(response);
        } catch (err) {
            setPermissionGranted(false);
            console.log(err);
        }
    };

    const handleRecording = () => {
        if (isRecording) {
            mediaRecorder.current.stop();
            setIsRecording(false);
        }

        mediaRecorder.current.start();
        setIsRecording(true);
    };
    ...

更改 ref 中的值不會導致重新渲染，并且即使在未卸載組件的情況下發生渲染，也會保留該值。

useRef 回傳一個可變 ref 物件，其 .current 屬性初始化為傳遞的引數 (initialValue)。回傳的物件將在組件的整個生命周期內持續存在。

標籤：反应打字稿反应钩子网络媒体记录器

上一篇：使用useQuery獲取新頁面時如何更新組件？

下一篇：如何通過條件型別檢查區分不同的函式簽名？