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)

      }

    })

  }

}