将const异步函数转换为React

Question

我有一个React类，在这里我要使用普通的js程序，并尝试将其实现为React类。结束状态应该是音乐生成器。

现在，我正在获取音频，这很棒，但这只是静态序列。最酷的部分是const async函数。作为前端的新手，我不确定如何将const异步函数转换为react组件的可用部分，因此它不仅会播放音符序列，而且会实际运行rnn。

这是课程：

class Beat3 extends React.Component {
  constructor(props) {
    super(props);
    this.improvCheckpoint = 'https://storage.googleapis.com/magentadata/js/checkpoints/music_rnn/chord_pitches_improv'
    this.improvRNN = new mm.MusicRNN(this.improvCheckpoint)
    this.synth = new Tone.Synth().toMaster()
    const { midi, Note } = Tonal
    this.player = new mm.Player();

    this.sequence = {
      BEATB: {
      ticksPerQuarter: 360,
      totalTime: 2,
      timeSignatures: [{ time: 0, numerator: 4, denominator: 4 }],
      tempos: [{ time: 0, qpm: 300 }],
      notes: [
        { pitch: 60.3, startTime: 0, endTime: 0.9 },
        { pitch: 65.4, startTime: 0.9, endTime: 1.9 },
        { pitch: 67.2, startTime: 1.9, endTime: 2.7 },
      ]
    }
  }

    this.quantizedSequence = mm.sequences.quantizeNoteSequence(this.sequence, 1)

    /*This is what Im trying to have run in the react class*/

    const startProgram = async () => {
    try {
    await this.improvRNN.initialize()
    let improvisedMelody = await this.improvRNN.continueSequence(
      this.quantizedSequence, 60, 1.1, [60, 75,67,69])

    const playOriginalMelody = () => {
      this.sequence.notes.forEach(note => {
        this.synth.triggerAttackRelease(Note.fromMidi(note.pitch),
        note.endTime - note.startTime, note.startTime)
      })
    }

    const playGeneratedMelody = () => {
      improvisedMelody.notes.forEach(note => {
        this.synth.triggerAttackRelease(Note.fromMidi(note.pitch),
        note.quantizedEndStep - note.quantizedStartStep, note.quantizedStartStep)
      })
    }

    const originalMelodyButton = document.getElementById('b1a')
    const generatedMelodyButton = document.getElementById('b1b')
    originalMelodyButton.onclick = () => {
      playOriginalMelody()
    }
    generatedMelodyButton.onclick = () => {
      playGeneratedMelody()
    }

  } catch (error) {
    console.error(error)
  }
 }
}

  componentDidMount() {
    this.player.start(this.sequence.BEATB);
  }

  componentWillUnmount() {
    this.player.stop();
  }

  render()
  {
    return (
      <div class="b1a">
      </div>
    );
  }
}

export default Beat3

当我将异步添加到componentDidMount时，声音仍然会出现，但是里面的const按钮不会出现。我相信它很容易解决，对此处的操作进行解释将非常有帮助。

带有异步的componentDidMount：

componentDidMount() {
    this.player.start(this.sequence.BEATB);
    const startProgram = async () => {
    try {
    await this.improvRNN.initialize()
    let improvisedMelody = await this.improvRNN.continueSequence(
      this.quantizedSequence, 60, 1.1, [60, 75,67,69])
    const playOriginalMelody = () => {
      this.sequence.notes.forEach(note => {
        this.synth.triggerAttackRelease(Note.fromMidi(note.pitch),
        note.endTime - note.startTime, note.startTime)
      })
    }
    const playGeneratedMelody = () => {
      improvisedMelody.notes.forEach(note => {
        this.synth.triggerAttackRelease(Note.fromMidi(note.pitch),
        note.quantizedEndStep - note.quantizedStartStep, note.quantizedStartStep)
      })
    }
    const originalMelodyButton = document.getElementById('b1a')
    const generatedMelodyButton = document.getElementById('b1b')
    originalMelodyButton.onclick = () => {
      playOriginalMelody()
    }
    generatedMelodyButton.onclick = () => {
      playGeneratedMelody()
    }
  } catch (error) {
    console.error(error)
  }
}
}

一如既往，我们将不胜感激。

Answer 1

如果要从ComponentDidMount调用startProgram函数（在应用程序中加载了组件时：]

async componentDidMount() {
    this.player.start(this.sequence.BEATB);

    await startProgram();
}

但是，考虑到在React中为按钮分配行为的理想通常做法是，在render()函数中的JSX中声明它们，并使用onClick属性分配行为。

例如，可以添加第一个按钮（实际上是div），其行为如下（您需要在类级别或playOriginalMelody内声明render()：]

render()
{
  return (
    <div class="b1a" onClick={playOriginalMelody}>
    </div>
  );
}