Невозможно показать изображения после загрузки из API - PullRequest
Новая
       128

Невозможно показать изображения после загрузки из API

0 голосов
/ 20 июня 2020

Я пытаюсь связать два запроса на выборку с помощью ax ios. Мой код: 

const fetchCatsData = async  () => {
  
  const fetchBreeds = await axios.get("https://api.thecatapi.com/v1/breeds", {
    headers: {
      "x-api-key": "MY API KEY ",
    },
  })
  await fetchBreeds.data.map(breed => {
    axios.get(`https://api.thecatapi.com/v1/images/search?breed_ids=${breed.id}&include_breeds=false`)
    .then(res => breed.image_url = res.data[0].url)
  })
 
  dispatch({ type: FETCH_BREEDS, payload:  fetchBreeds.data })

Успешно, и в инструментах разработки реакции я вижу специальный ключ image_url внутри моего контекста с URL-адресом изображения. Я нажимаю на его значение и открываю запрошенное изображение.

Но когда я пытаюсь показать изображение в теге image HTML, ничего не отображается ...

Я что-то упускаю?

Заранее спасибо

1 Ответ

0 голосов
/ 21 июня 2020

Исходя из приведенного здесь кода, я предполагаю, что вы пытаетесь дождаться, пока image_url не будет установлен для всех элементов в fetchBreeds.data. Но так работать не будет. 

await fetchBreeds.data.map(breed => {
    axios.get(`https://api.thecatapi.com/v1/images/search?breed_ids=${breed.id}&include_breeds=false`)
    .then(res => breed.image_url = res.data[0].url)
  })

Вы используете await в функции карты. Функция карты не является асинхронной c, поэтому, когда вы отправляете действие, image_urls еще не установлены. Когда вы проверили магазин и обнаружили, что image_url был там, потому что fetchBreeds.data был изменен прямым вызовом ax ios без использования системы диспетчеризации redux. Это не привело к повторной визуализации пользовательского интерфейса, поэтому изображение не отображалось. Что произошло, показано ниже:

  1. dispatch({ type: FETCH_BREEDS, payload: fetchBreeds.data }) Это происходит первым.
  2. Компонент получает уведомление, поэтому произведите повторную визуализацию. image_url еще не установлен, поэтому изображение пустое
  3. .then(res => breed.image_url = res.data[0].url) Это вызывается следующим. Поскольку функция содержит ссылку на fetchBreeds.data, она изменяет объект fetchBreeds.data напрямую, без использования редуктора.
  4. Пользовательский интерфейс не уведомляется, поэтому он не знает, что image_url изменен и не будет повторно render.

Я предлагаю вам изменить функцию на: 

  await Promise.All(fetchBreeds.data.map(breed => {
    return axios.get(`https://api.thecatapi.com/v1/images/search?breed_ids=${breed.id}&include_breeds=false`)
    .then(res => breed.image_url = res.data[0].url)
  }))
...