Question

我正在尝试制作一个应用程序来记录和播放所记录的内容，但我出现了这个错误

错误类型错误：_this2.onStartPlay 不是函数。（在 '_this2.onStartPlay()' 中，'_this2.onStartPlay' 未定义）错误参考错误：找不到变量：onPausePlay

LOG audioSet {"AVEncoderAudioQualityKeyIOS": 96, "AVFormatIDKeyIOS": "aac", "AVNumberOfChannelsKeyIOS": 2, "AudioEncoderAndroid": 3, "AudioSourceAndroid": 1} LOG audioSet {"AVEncoderAudioQualityKeyIOS": 96, "AVFormatIDKeyIOS": "aac", "AVNumberOfChannelsKeyIOS": 2, "AudioEncoderAndroid": 3, "AudioSourceAndroid": 1} LOG uri: 已经记录警告可能未处理的承诺拒绝 (id: 0):

这是我的代码

import React, {Component} from 'react';

import AudioRecorderPlayer, {
  AVEncoderAudioQualityIOSType,
  AVEncodingOption,
  AudioEncoderAndroidType,
  AudioSet,
  AudioSourceAndroidType,
} from 'react-native-audio-recorder-player';

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

export default class App extends Component {
  onStartRecord = async () => {
    const path = 'hello.m4a';
    const audioSet = {
      AudioEncoderAndroid: AudioEncoderAndroidType.AAC,
      AudioSourceAndroid: AudioSourceAndroidType.MIC,
      AVEncoderAudioQualityKeyIOS: AVEncoderAudioQualityIOSType.high,
      AVNumberOfChannelsKeyIOS: 2,
      AVFormatIDKeyIOS: AVEncodingOption.aac,
    };
    console.log('audioSet', audioSet);
    const uri = await this.audioRecorderPlayer.startRecorder(path, audioSet);
    this.audioRecorderPlayer.addRecordBackListener(e => {
      this.setState({
        recordSecs: e.current_position,
        recordTime: this.audioRecorderPlayer.mmssss(
          Math.floor(e.current_position),
        ),
      });
    });
    console.log(`uri: ${uri}`);
  };

  onStopRecord = async () => {
    const result = await this.audioRecorderPlayer.stopRecorder();
    this.audioRecorderPlayer.removeRecordBackListener();
    this.setState({
      recordSecs: 0,
    });
    console.log(result);
  };

  constructor(props) {
    super(props);

    this.state = {
      isLoggingIn: false,
      recordSecs: 0,
      recordTime: '00:00:00',
      currentPositionSec: 0,
      currentDurationSec: 0,
      playTime: '00:00:00',
      duration: '00:00:00',
    };

    this.audioRecorderPlayer = new AudioRecorderPlayer();
    this.audioRecorderPlayer.setSubscriptionDuration(0.09); // optional. Default is 0.1
    // onPausePlay = async e => {
    //   await this.audioRecorderPlayer.pausePlayer();
    // };

    // onStopPlay = async e => {
    //   console.log('onStopPlay');

    //   this.audioRecorderPlayer.stopPlayer();

    //   this.audioRecorderPlayer.removePlayBackListener();
    // };
  }
  render() {
    return (
      <View
        style={{
          flex: 1,
          flexDirection: 'row',
          alignItems: 'center',
          alignContent: 'center',
          alignSelf: 'center',
        }}>
        <View>
          <Text>InstaPlayer</Text>
          <Text>{this.state.recordTime}</Text>
          <Button
            title="Record"
            mode="contained"
            onPress={() => this.onStartRecord()}
            // onPress={onStartRecord}
          />
          <Button title="stop" onPress={() => this.onStopRecord()} />

          <Text>
            {this.state.playTime} / {this.state.duration}
          </Text>

          <Button title="play" onPress={() => this.onStartPlay()} />
          {/* <Button title="pause" onPress={() => this.onPausePlay()} /> */}
          {/* <Button title="stop" onPress={() => this.onStopPlay()} /> */}
        </View>
      </View>
    );
  }
}

Answer 1

JavaScript 基本上不是异步的。这意味着如果您的代码执行一些需要一些时间才能完成的操作，您的代码将不会自动等待它完成。这就是 Promise 的用武之地，它允许我们处理这些不能立即解决的事件。

当你使用一个 Promise，或者你使用一个在后台使用 Promises 的库时，你必须提供两个事件。第一个是代码成功运行时（即“解决”），第二个是代码抛出错误时（即“拒绝”）。当您不提供处理错误状态的逻辑时，它被称为“未处理的承诺拒绝”。

在不知道您正在使用的库的详细信息的情况下，很难为您提供有关如何更改代码的确切详细信息，但是我可以做出有根据的猜测，onStartRecord、onStopRecord、onStartPlay、onPausePlay 和 onStopPlay 函数都是异步的并且他们中的任何一个都可能导致警告被抛出。

尝试更改此代码段：

<Button
  title="Record"
  mode="contained"
  onPress={() => this.onStartRecord()}
/>

为此：

<Button
  title="Record"
  mode="contained"
  onPress={() => {
    return this.onStartRecord()
             .then((result) => { console.log(result); })
             .catch((error) => { console.log(error); });
  }
/>

看看会发生什么。

如何解决该错误>>警告可能未处理的承诺拒绝（ID：0）：

1 个答案: