Начал изучать react, и я пытаюсь создать простой поиск изображений с помощью unsplash API, но у меня возникают проблемы с рендерингом страницы

#reactjs

Вопрос:

Я работаю над этим приложением уже несколько дней. У меня есть API для входа в консоль onClick, но я не могу понять, как я предполагаю отобразить его на странице. Любая помощь будет высоко оценена!

 
import React, {useState} from "react";

const App = () => {   const AUTH = "##########";   const API_URL = `https://api.unsplash.com/photos?query=londonamp;client_id=${AUTH}`;

  const [loadImages, setloadImages] = useState([{}]);
    async function handleClick(event) {
    event.preventDefault();

    const response = await fetch(API_URL);
    const data = await response.json();
    setloadImages(data);
    console.log(data)   }
  
  

  return (
    <div className="App">
      <form className="form">
        <div className="input-group mb-3">
          <input
            type="text"
            className="form-control"
            placeholder="Search Photos..."
            aria-label="Search Photos..."
            aria-describedby="basic-addon2"
          />
          <button
            type="submit"
            className="btn btn-primary"
            onClick={handleClick}
          >
            Search
          </button>
        </div>
      </form>
      <ul>
          {loadImages.map((image) => (
            <li>
              <img src={image.data} alt=" " />
            </li>
          ))}
        </ul>
      </div>   ); };

export default App;

Скриншот результатов

1. Какова форма данных, которые вы получаете из выборки? Переместите консоль. войдите в журнал перед setImagesData, чтобы убедиться, что он вызван.

2. Консоль. журнал до и после setimagesData возвращает то же самое, массив объектов, содержащих каждое изображение.

3. Какова форма каждого изображения? Он вообще что-нибудь отображает или вы получаете сообщение об ошибке?

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

5. Вы используете image.data для src тега img. Вы уверены image.data , что это то свойство, которое вам нужно? Я не знаю форму объекта изображения.

Ответ №1:

Основываясь на ответе от api, data свойство не существует для объекта. Вместо этого вы должны получить доступ к одному из URL-адресов. В этом фрагменте используется необработанный URL, но вы можете захотеть посмотреть на другие

           {loadImages.map((image) => (
            <li>
              <img src={image.urls.raw} alt=" " />
            </li>
          ))}

Редактировать

Чтобы ответить на комментарий о том, что он выдает ошибку, что он не может прочитать свойство raw (или любое другое) undefined , это, скорее всего, потому, что один из объектов не обладает этим свойством. В этом случае вы можете выполнить условный рендеринг, чтобы убедиться, что он существует, прежде чем отображать тег изображения.

           {loadImages.map((image) => (
            <li>
              { image.urls amp;amp; <img src={image.urls.raw} alt=" " /> }
            </li>
          ))}

1. На самом деле это было то, что я пробовал изначально, хотя я сделал {image.urls.regular}, но он просто выдает ошибку «не удается прочитать свойство «regular» неопределенного»

2. Это исправило проблему! Я знаю, что вы уже очень помогли, но не могли бы вы объяснить, что здесь происходит на самом деле? он все еще ищет то же свойство, так почему {image.urls amp;amp;} устраняет проблему?

3. Я рад, что это помогло! Так что это условный рендеринг. Он проверяет, является ли левая часть amp;amp; true , и если это так, он отображает правую сторону. В противном случае он пропускает его рендеринг. Поэтому, если image.urls значение не определено, оно возвращается false в этом состоянии, и рендеринг пропускается, и image.urls.raw никогда не вызывается, и это не вызывает проблем. Вы можете прочитать немного больше об условном рендеринге здесь: reactjs.org/docs/conditional-rendering.html