时间戳

首页 > 解决方案 > 开始学习反应，我正在尝试使用 unsplash API 构建一个简单的图像搜索，但我无法渲染到页面

reactjs - 开始学习反应，我正在尝试使用 unsplash API 构建一个简单的图像搜索，但我无法渲染到页面

问题描述

我已经在这个应用程序上工作了几天了。我有 API 可以登录到控制台 onClick，但无法弄清楚我应该如何将它呈现到页面上。任何帮助将非常感激！


import React, {useState} from "react";

const App = () => {   const AUTH = "##########";   const API_URL = `https://api.unsplash.com/photos?query=london&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;

结果截图

标签： reactjs

解决方案

根据 api 的响应，该data属性在对象上不存在。相反，您应该访问其中一个 URL。此代码段使用原始 URL，但您可能想查看其他代码段

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

编辑

要回答它引发无法读取未定义的原始属性（或任何其他属性）的错误的评论，很可能是因为其中一个对象没有此属性。在这种情况下，您可以在渲染图像标签之前进行条件渲染以确保它存在。

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

推荐阅读