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

问题是在执行onloadedmetadata回调之前就执行了return duration。该事件是异步的。这在其他Q&中有更详细的解释，例如

Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference

在您的示例中，不是获取回调函数的值"out“，而是在onloadedmetadata事件处理程序中调用setState，当/在值可用时：

onChangeAudioFile(e) {
  var objectURL = URL.createObjectURL(e.target.files[0]);
  var audio = new Audio([objectURL]);

  audio.onloadedmetadata = () => {
    this.setState({
      selectedFileDuration: audio.duration;
    };
  };
}

另请参见my blog post about callback misconceptions。

Answer 2

promise值不是现成的，您需要创建一个promise，以便可以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)
      }
    })
  }
}