首頁猿問從流式音頻功能更新...

從流式音頻功能更新 useState 時無限重新渲染

JavaScript

catspeake 2021-11-04 15:07:38

我正在構建一個應用程序 React Native，我將一組音頻文件發送到 Expo AV Audio.Sound 對象中，加載它們，播放它們，然后嘗試使用有關音頻文件的信息更新應用程序本身的顯示正在播放（特別是用戶在文件中的距離）。我正在嘗試通過 useState 鉤子更新顯示，該鉤子由音頻播放器的回調函數調用。我遇到的問題是，每當我嘗試從音頻播放器回調函數更改狀態時，我都會陷入無限的重新渲染。簡化代碼如下：import React, { useState} from 'react';import { Audio } from 'expo-av';const AudioPlayer = ({ user }) => { const [currentProgress, setCurrentProgress] = useState(0); const soundObject = new Audio.Sound(); soundObject.setOnPlaybackStatusUpdate(playbackUpdate); // sets a function that is called every 500 milliseconds as the audio is played if(user) { soundObject.loadAsync({user.message.path}); } const play = () => { soundObject.playAsync(); } const playbackUpdate = (playbackObject) => { setCurrentProgress(playbackObject.currentMillis); // updating state with progress through audio file in milliseconds } return ( <View> <Text>{currentProgress}</Text> <Button title="play" onPress={play} /> </View> )}export default AudioPlayer

查看完整描述

1 回答

慕哥9229398

TA貢獻1877條經驗獲得超6個贊

請記住，您的函數體中的所有內容都將在每次渲染上運行 - 因此在這種情況下，您正在創建一個新的soundObject并可能soundObject.loadAsync在每個渲染上運行調用。您需要利用其他鉤子來避免這種情況 - 在您的情況下可能useRef和useEffect. 我建議通過 hooks api 參考熟悉這些：https : //reactjs.org/docs/hooks-reference.html

這是我如何避免不必要的影響的快速嘗試。您可能想要查看和調整依賴項數組，具體取決于您希望事情如何運作以及您希望何時重新運行各種效果。例如，我不確定您是否需要Sound重新創建對象。

import React, { useState, useRef, useCallback, useEffect} from 'react';

import { Audio } from 'expo-av';

import { Button, View, Text } from 'react-native';

const AudioPlayer = ({ user }) => {

const [currentProgress, setCurrentProgress] = useState(0);

const soundObjectRef = useRef(new Audio.Sound());

useEffect(() => {

const playbackUpdate = (playbackObject) => {

setCurrentProgress(playbackObject.currentMillis);

// updating state with progress through audio file in milliseconds

}

soundObjectRef.current.setOnPlaybackStatusUpdate(playbackUpdate);

}, []); // do this only once per component mount

// sets a function that is called every 500 milliseconds as the audio is played

useEffect(() => {

if (user) {

soundObjectRef.current.loadAsync({user.message.path});

}

}, [user]); // run this anytime user changes but do not run again if user doesn't change

const play = () => {

soundObjectRef.current.playAsync();

}

return (

<View>

<Text>{currentProgress}</Text>

</View>

)

}

export default AudioPlayer

反對回復 2021-11-04

1 回答
0 關注
174 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

從流式音頻功能更新 useState 時無限重新渲染

從流式音頻功能更新 useState 時無限重新渲染

1 回答

添加回答