Question

我明白为什么这不起作用，但我找不到解决方案。

我的项目有一个标准的 Next JS 结构。

我在根目录中添加了一个 components 目录。

内部组件我有以下组件：

import { useState } from 'react'

export default function Player({url}) {

    const [audio, setAudio] = useState(new Audio(url))

    return (
      <button onClick={ audio.play() }>Play Audio</button>
    )
}

此（简化示例）组件正在导入到我的一个页面中。

我看到以下错误：ReferenceError: Audio is not defined

我理解这是因为组件正在服务器上编译，而 NodeJS 不知道 Audio() 是什么。

但是我找不到解决此问题的解决方案。

我尝试导入 useEffect 并在组件安装后从其中设置状态，但这会导致其他错误，我认为这不是正确的解决方案。

非常感谢有关从 NextJS 组件内与浏览器 API 交互的最佳实践的任何帮助。

**更新：评论者要求 useEffect 实现

import { useState, useEffect } from 'react'

export default function Player({url}) {

  useEffect(() => {
    const [audio, setAudio] = useState(new Audio(url))
  }, [])

  return (
    <button onClick={ audio.play() }>Play Audio</button>
  )
}

返回 ReferenceError: audio is not defined

Answer 1

您的 useEffect 实现是错误的。此外，您需要将一个函数传递给 onClick。改为这样做：

import { useState, useEffect } from 'react'

export default function Player({ url }) {

  const [audio, setAudio] = useState(null)

  useEffect(() => { setAudio(new Audio(url)) }, [])

  return <button onClick={() => { audio?.play() }}>Play Audio</button>
}

另请参考：Rules of Hooks

这是一个CodeSandbox

Next JS Audio 构造函数未定义

1 个答案: