獲取API影像以在NextJS應用程式中顯示時出現問題-有解無憂

這是我第一次使用 NextJS，我正在嘗試使用 Dog.ceo API 將 3 個隨機狗品種影像加載到應用程式的網頁上。我可以從 console.log(data) 行看到控制臺中的三只隨機狗，但沒有顯示影像。在此 API 中，只有兩個屬性 - 訊息（包含影像 URL）和狀態（顯示“成功”）。對如何顯示這些影像有幫助嗎？還要注意，我沒有為此使用 Typescript。

const defaultEndpoint = "https://dog.ceo/api/breeds/image/random/3";

export async function getServerSideProps() {
  const res = await fetch(defaultEndpoint);
  const data = await res.json();

  return {
    props: { data },
  };
}

export default function Home({ data }) {
  console.log("data", data);
  const { results = [] } = data;
  return (
    <div className={styles.container}>
      <Head>
        <title>Dog Breed App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main>
        <div className="grid">
          {results.map((result) => {
            const { message } = result;

            return (
              <div key={message}>
                <img src={message} alt=""></img>
              </div>
            );
          })}
        </div>
      </main>
    </div>
  );
}

我嘗試使用“資料”變數中的“訊息”來獲取影像的 url。但這是行不通的。

uj5u.com熱心網友回復：

這只是一個解構錯誤。你有const { results = [] } = data;。

該行說：在我的資料物件中找到名為 results 的屬性，如果它不存在，則將其設定為空陣列。您的資料物件沒有名為的屬性results。它有一個名為message.

您可以將此行更改為const { message = [] } = data然后回圈遍歷訊息陣列，或者您可以props.data像這樣將訊息陣列存盤在屬性中：

export async function getServerSideProps() {
  const res = await fetch('https://dog.ceo/api/breeds/image/random/3');

  // Destructure the response object here and 
  // rename the 'message' property as 'data'
  const { message: data } = await res.json();

  return {
    props: { data },
  };
}

// Destructure the props object to have access to the 
// property named data:
export default function Home({ data }) {
  return (
    <main>
      <div className="grid">
        {data.map((img) => (
          <div key={img}>
            <img src={img} alt="dog"></img>
          </div>
        ))}
      </div>
    </main>
  );
}

uj5u.com熱心網友回復：

您可以使用useEffect鉤子加載資料并更新到狀態dogs。這將在組件創建時更新渲染一次。

const defaultEndpoint = "https://dog.ceo/api/breeds/image/random/3";
import React, { useState, useEffect } from 'react'


export default function Home({ data }) {
  const [dogs, setDogs] = useState([]);

  export async function getServerSideProps() {
    const res = await fetch(defaultEndpoint);
    const data = await res.json();
  
    console.log("data", data);
    setDogs(data)
  }
  useEffect(() => {
    getServerSideProps()
  }, [])
  
  return (
    <div className={styles.container}>
      <Head>
        <title>Dog Breed App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main>
        <div className="grid">
          {dogs.map((result) => {
            const { message } = result;

            return (
              <div key={message}>
                <img src={message} alt=""></img>
              </div>
            );
          })}
        </div>
      </main>
    </div>
  );
}

我建議使用[dependencies]inuseEffect來控制它何時重新呈現，如下所示

useEffect(() => {
      //
    
      return () => {
        // 
      }
    }, [dependencies])

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/536984.html

標籤：javascript反应应用程序接口下一个.js

上一篇：如何在React上正確存盤用戶的jwt令牌

下一篇：呈現錯誤：未定義不是物件（評估“行程[索引]。地點）