Реагировать на ловушку useEffect вызывает исключение DOMException: для запроса разрешений требуется активация пользователя.

Question

У меня есть React useEffect ловушка, которая будет читать локальные файлы, ранее одобренные пользователем.

Для чтения файлов он использует [FileSystemHandle.queryPermission()][1] метод, который, если нет granted запросит у пользователя доступ с помощью FileSystemHandle.requestPermission() метод.

Проблема в том, что это происходит до того, как у пользователя появляется возможность взаимодействовать со страницей, что вызывает DOMException: User activation is required to request permissions. ошибка.

Есть ли способ обойти это?

Answer 1

Это связано с требованием активации пользователя, определенным Google и теперь включенным в спецификацию HTML .

Чтобы обойти это, нужно удалить это действие из выполнения как часть useEffect перехватить и вместо этого предложить пользователю сначала выполнить действие.

В моем случае пользовательский интерфейс покажет индикатор того, что контент необходимо обновить, с небольшой кнопкой для запуска действия. Это квалифицируется как активация пользователя, и процесс выполняется без ошибок.

      let file, perms

perms = await fileHandle.queryPermission()

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