javascript - 在 React 中转换为函数式组件时面临的问题

Question

这是一个非常小的两页项目，因此不会花费太多时间。

我正在尝试将此Github 存储库从基于类的组件转换为功能组件。我非常接近，但逻辑无法正常工作。特别是 useState 钩子，因为值没有被保存。所以我尝试了不同的方法。

这是原始项目的现场演示的预期输出：

https://matt-eric.github.io/web-audio-fft-visualization-with-react-hooks/

这就是我所在的地方。这是沙盒链接。

暂时忽略The error you provided does not contain a stack trace.错误。单击x并刷新小project window（不是您的浏览器选项卡）几次，直到刷新时播放音频。这是因为谷歌阻止你在加载时播放音乐。

我想通过单击按钮而不是加载来播放音频。但它不起作用。

感谢任何人去调查它。

标签： javascriptreactjsaudioreact-hooksweb-audio-api

Answer 1

需要进行一些清理，但这是有效的。https://codesandbox.io/s/xenodochial-wildflower-c5b35

我真正所做的只是将所有函数放在useCallback一个audioFileref 中，然后toggleAudio根据其当前状态创建播放或暂停音频的函数。我看到的最大问题之一是您试图在单击时初始化音频，但这确实应该在安装时完成，然后当您单击时音频才开始。此外，如果您在每次点击时都进行初始化，则会导致错误，因为它已经初始化。

如果您有任何问题，请告诉我！