Проблема не могу вытщить get запросом один элеменет в масиве

Рейтинг: 0Ответов: 2Опубликовано: 23.06.2023
 "apartment_images": [
                {
                    "id": 10,
                    "image": "https://vm4506017.43ssd.had.wf/media/apartment/image_rv_seven.png",
                    "created_at": "2023-06-20 18:34:33",
                    "apartment": 2
                },
                {
                    "id": 9,
                    "image": "https://vm4506017.43ssd.had.wf/media/apartment/image_rv_six.png",
                    "created_at": "2023-06-20 18:34:19",
                    "apartment": 2
                },
                {
                    "id": 8,
                    "image": "https://vm4506017.43ssd.had.wf/media/apartment/image_rv_three.png",
                    "created_at": "2023-06-20 18:33:57",
                    "apartment": 2
                }
            ],

вот так выглядит массив

  async function getProducts() {
    try {
      const { data } = await axios.get(`${BASE_URL}/apartment/`);
      dispatch({
        type: ACTIONS.products,
        payload: data.results,
      });
    } catch (error) {
      console.log(error);
    }
  }

функция стягивания <img src={item.apartment_images.image} alt="error" /> и вот сюда нужно стянуть изображение но я щас не понимаю как это сделать всю ночь просидел все перебрал не получлось помогите срочно

json reactjs frontend
Источник: Stack Overflow на русском

Ответы

▲ 0

  1. Вы получили массив и сохранили его в глобальном store с помощью dispatch.

  2. Затем вам необходимо в компоненте, где у вас этот тег img вызвать хук useSelector, который позволяет получить глобальные объекты из store.

  3. Через useSelector получаете данный массив в свой компонент и либо по индексу, либо же, если у вас этих тегов img несколько, с помощью map в img передаете значение ключа image из вашего массива.

▲ 0
{item.apartment_images.length > 0 ? (
  <img
    width="100%"
    src={item.apartment_images[0].image}
    alt="error"
  />
) : (
  <p>No image available.</p>
)}

решилось таким образом, нужно было длину убрать, и потом по идексу первый