React：如何从函数中获取值并将其写入状态？

Question

我正在开发一个函数，可以读取音频文件输入的持续时间，然后将其写入状态。该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

  }

}

我可以控制台记录持续时间，但无法将值从函数中取出并将其写入我的状态。

我很高兴得到任何澄清。

Answer 1

问题是它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;    };  };}

Answer 2

该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)      }    })  }}