Reactjs 开始学习react，我正在尝试使用unsplash API构建一个简单的图像搜索，但在呈现到页面时遇到了问题

我已经在这个应用程序上工作了几天了。我已经将API登录到console 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; 

从“React”导入React，{useState}；
const-App=（）=>{const-AUTH=“####################”const-API#u-URL=`https://api.unsplash.com/photos?query=london&client_id=${AUTH}`；
const[loadImages，setloadImages]=useState（[{}]）；
异步函数handleClick（事件）{
event.preventDefault（）；
const response=wait fetch（API_URL）；
const data=wait response.json（）；
setloadImages（数据）；
console.log（数据）}
返回(
搜寻

{loadImages.map（（图像）=>(


))}

); };
导出默认应用程序；

---

根据api的响应，对象上不存在

数据

属性。相反，您应该访问其中一个URL。此代码段使用的是原始URL，但您可能希望查看其他代码段

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

{loadImages.map（（图像）=>(


))}

编辑

要回答它抛出错误的注释，即它无法读取未定义的属性raw（或任何其他属性），很可能是因为其中一个对象没有此属性。在这种情况下，可以在渲染图像标记之前执行条件渲染以确保其存在

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

{loadImages.map（（图像）=>(

{image.url&&}

))}

从提取中获得的数据的形状是什么？将console.log移动到setImagesData之前，以确保调用它。setImagesData之前和之后的console.log返回相同的对象数组，其中包含每个图像。每个图像的形状是什么？它是否渲染了任何东西，或者您是否遇到了错误？哦，对不起，它的渲染项目符号旁边有图像占位符，如果它无法加载图像，您将得到该占位符。您可以使用

image.data

作为img标记的src。您确定

image.data

是您想要的属性吗？我不知道图像对象的形状。这实际上是我最初尝试的，虽然我做了{image.url.regular}，但它只是抛出了一个错误“无法读取未定义的属性”regular”，从而纠正了问题！我知道你已经帮了很多忙，但你能解释一下这里到底发生了什么吗？它仍然在寻找相同的属性，那么为什么{image.url&&}解决了这个问题呢？我很高兴它能帮上忙！因此，它是一个条件渲染。它检查

&&

的左侧是否为真，如果为真，则渲染右侧。否则，它将跳过渲染。因此，如果未定义

image.urls

，则在此条件下返回

false

，并跳过渲染，并且从不调用

image.urls.raw

，也不会导致问题。您可以在此处阅读更多关于条件渲染的内容：