Есть ли способ загрузить изображения до их просмотра в React?

Question

Я очень новичок, чтобы реагировать, и до сих пор самая запутанная / расстраивающая часть пыталась иметь дело с URL-адресами изображений, срок действия которых истекает сразу после вызова API. Я строю платформу с несколькими страницами, и каждая страница содержит много разных изображений (которые выбираются с сервера). Но срок действия URL-адресов для изображений истекает через 10 секунд, поэтому, если я не переключусь на страницы, отображающие изображения в течение 10 секунд (чтобы они могли загружаться), они никогда не будут отображаться.

Я просто Хотите знать, что лучший способ сделать это? Я мог бы сделать вызов API каждый раз, когда мне нужно загрузить изображения ie каждый раз, когда я переключаю компоненты / страницы. Но это на самом деле оказывается довольно медленным, поскольку для получения всей информации требуется около 4 секунд.

Вот когда я попадаю на одну из страниц во времени Vs. когда я достигну его через 10 секунд.

Answer 1

Когда вы выбираете изображения, вы можете сохранять изображения в localStorage и извлекать их оттуда для отображения в пользовательском интерфейсе. Таким образом, у вас всегда будет доступ к изображениям, и после перезагрузки страницы используйте componentWillUnmount и удалите эти изображения из localStorage. Надеюсь, это поможет.

Answer 2

Вы должны использовать componentDidMount() жизненный цикл или useEffect перехват для HTTP-запроса. Эта статья может быть полезна для вас Методы реагирования жизненного цикла