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

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

React:如何從函數中獲取值并將其寫入狀態?

React:如何從函數中獲取值并將其寫入狀態?

至尊寶的傳說 2023-07-06 18:16:30
我正在開發一個函數,可以讀取音頻文件輸入的持續時間,然后將其寫入狀態。該getDuration功能有效,我可以通過控制臺記錄音頻文件的持續時間。但是,我在訪問函數外部的持續時間時遇到問題getDuration。我想做這樣的事情:onChangeAudioFile(e) {  this.setState({    selectedFileDuration: getDuration(e.target.files[0])  };  function getDuration(file) {    var objectURL = URL.createObjectURL(file);    var audio = new Audio([objectURL]);    var duration = null    audio.onloadedmetadata = function() {      console.log(audio.duration);      duration = audio.duration;    }    return duration  }}我可以控制臺記錄持續時間,但無法將值從函數中取出并將其寫入我的狀態。我很高興得到任何澄清。
查看完整描述

2 回答

?
繁星淼淼

TA貢獻1775條經驗 獲得超11個贊

問題是它return duration是在onloadedmetadata回調執行之前執行的。該事件是異步的。其他問答中對此進行了更詳細的解釋,例如


在您的情況下,不要從回調函數中獲取值,而是setState在該值可用時/在該值可用時調用:在onloadedmetadata事件處理程序中:


onChangeAudioFile(e) {

? var objectURL = URL.createObjectURL(e.target.files[0]);

? var audio = new Audio([objectURL]);


? audio.onloadedmetadata = () => {

? ? this.setState({

? ? ? selectedFileDuration: audio.duration;

? ? };

? };

}


查看完整回答
反對 回復 2023-07-06
?
絕地無雙

TA貢獻1946條經驗 獲得超4個贊

該duration值不容易獲得,您需要創建一個承諾,以便您可以await獲取getDuration.


async onChangeAudioFile(e) {

  this.setState({

    selectedFileDuration: await getDuration(e.target.files[0])

  };


  function getDuration(file) {

    return new Promise((res) => {

      var objectURL = URL.createObjectURL(file);

      var audio = new Audio([objectURL]);


      audio.onloadedmetadata = function() {

        console.log(audio.duration);

        res(audio.duration)

      }

    })

  }

}


查看完整回答
反對 回復 2023-07-06
  • 2 回答
  • 0 關注
  • 174 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號