我如何分别定位每个图像，并从中获取 API 数据，而不是一次收集所有数据

Question

我创建了一个连接到 API 的应用程序来检索狗的图像。在页面加载时，会显示 12 张图像以及 json 文本，提供有关品种的信息；狗的身高等等

我的最后一步是以某种方式将按钮（已经存在）连接到每个单独的图像，然后在单击它后检索特定 dog/image 的数据，而不是 API 获取在初始页面加载时立即加载所有数据。

App.js

import './App.css';
import './Dog.js';
import './index.css';
import FetchAPI from './FetchAPI';




function DogApp() {

  return (
    
    <div className="dogApp">
     <FetchAPI />   
    </div>
  );
}

export default DogApp;

FetchAPI.js

import React, { useState, useEffect } from 'react'


const FetchAPI = () => {

    const [data, setData] = useState([]);
    const apiGet = () => {
        const API_KEY = "";
        fetch(`https://api.thedogapi.com/v1/images/search?limit=12&page=10&order=Desc?API_KEY=${API_KEY}`)
            .then((response) => response.json())
            .then((json) => {
                console.log(json);
                //setData([...data,json]); if json is single object
                setData([...data, ...json]); // if json is array of one object then use this line
            });
    };

    useEffect(() => {           //call data when pagee refreshes/initially loads 
        apiGet();
    }, []);

    return (
        <div>
            {data.map((item) => (
                <div class="dog">
                    <img src={item.url}></img>
                    <button onClick={item.breeds}>Fetch API</button>
                </div>
            ))}
            {data.map((item) => (
                <p>{JSON.stringify(item.breeds)}</p>
            ))}


            {/*<pre>{JSON.stringify(data, null, 2)}</pre> */}
            <br />


        </div>

    )
}

export default FetchAPI;

Answer 1

制作另一个函数，它将获取新的（单个）图像并将其更改为我制作名为 apiGetSingle 的函数的状态，该函数更改特定索引上的数据。如果你已经像我在 apiGetSingle 中提到的那样创建了路由，它将 return 单个新图像那么它将工作正常，否则也为它创建后端路由。

import React, { useState, useEffect } from 'react'


const FetchAPI = () => {

const [data, setData] = useState([]);
const apiGet = () => {
    const API_KEY = "";
    fetch(`https://api.thedogapi.com/v1/images/search?limit=12&page=10&order=Desc?API_KEY=${API_KEY}`)
        .then((response) => response.json())
        .then((json) => {
            console.log(json);
            //setData([...data,json]); if json is single object
            setData([...data, ...json]); // if json is array of one object then use this line
        });
};
 const apiGetSingle = (index) => {
    const API_KEY = "";
    fetch(`https://api.thedogapi.com/v1/images/search?API_KEY=${API_KEY}`)
        .then((response) => response.json())
        .then((json) => {
            console.log(json);
            let d=[...data];
            d[index]=json; // if json is single object.
            d[index]=json[0] // if json returns array
            setData(d);
 };

useEffect(() => {        
}, []);

return (
    <div>
        {data.map((item,index) => (
            <div class="dog">
                <img src={item.url}></img>
                <button onClick={()=>apiGetSingle(index)}>Fetch API</button>
            </div>
        ))}
        {data.map((item) => (
            <p>{JSON.stringify(item.breeds)}</p>
        ))}

        <button onClick={apiGet}>Fetch API</button>
        {/*<pre>{JSON.stringify(data, null, 2)}</pre> */}
        <br />


    </div>

)
}

export default FetchAPI;

我如何分别定位每个图像，并从中获取 API 数据，而不是一次收集所有数据

How do I target each image seperately, and fetch API data from them, instead of collect it all at once

javascript

reactjs

fetch-api