reactjs - React useEffect hook 导致 DOMException: User activation is required to request permissions

Question

我有一个 ReactuseEffect挂钩，可以读取用户之前批准的本地文件。

要读取文件，它使用该[FileSystemHandle.queryPermission()][1]方法，如果没有，granted它将提示用户使用该FileSystemHandle.requestPermission()方法进行访问。

问题是这发生在用户有机会与页面交互之前，这会导致DOMException: User activation is required to request permissions.错误。

有没有办法解决？

Answer 1

这是由于 Google 定义的用户激活要求，现在已纳入HTML 规范。

解决此问题的方法是将此操作作为useEffect挂钩的一部分从执行中删除，而是提示用户首先执行该操作。

在我的例子中，UI 将显示一个需要更新内容的指示器，并带有一个小按钮来触发操作。这符合用户激活的条件，并且该过程在没有错误的情况下运行。

let file, perms

perms = await fileHandle.queryPermission()

if (perms === 'granted') file = await fileHandle.getFile()
else if (perms === 'prompt') {
  setButtonForRetry(true)
}