如何顯示訊息而不是空陣列

我的應用程式有兩個按鈕，一個顯示資訊，另一個隱藏資訊。這按預期作業，但是，從 API 加載的一些影像沒有任何可用資料，并且當按下顯示資訊的按鈕時，它回傳一個 []

我將如何定位那些加載空陣列并添加字串的物件。例如“沒有該品種的資訊可用？”

應用程式.js

import './App.css';
import './Dog.js';
import './index.css';
import "./Grid.js";
import NestedGrid from './Grid.js';
import Album from './Grid.js';
import AppLayout from './Grid.js';



function DogApp() {

  return (
    <div className="dogApp">
      <AppLayout />
    </div>

  );
}

export default DogApp;

網格.js

import * as React from 'react';
import AppBar from '@mui/material/AppBar';
import Button from '@mui/material/Button';
import Card from '@mui/material/Card';
import CardActions from '@mui/material/CardActions';
import CardContent from '@mui/material/CardContent';
import CardMedia from '@mui/material/CardMedia';
import CssBaseline from '@mui/material/CssBaseline';
import Grid from '@mui/material/Grid';
import Stack from '@mui/material/Stack';
import Box from '@mui/material/Box';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import Container from '@mui/material/Container';
import Link from '@mui/material/Link';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import FetchAPI from './FetchAPI';


const cards = [1, 2, 3, 4, 5, 6, 7, 8, 9];

const theme = createTheme();

export default function AppLayout() {
    return (
        <ThemeProvider theme={theme}>
            <CssBaseline />
            <AppBar position="relative">
            </AppBar>
            <main>
                {/* Hero unit */}
                <Box
                    sx={{
                        bgcolor: 'background.paper',
                        pt: 8,
                        pb: 6,
                    }}
                >
                    <Container maxWidth="sm">
                        <Stack
                            sx={{ pt: 4 }}
                            direction="row"
                            spacing={2}
                            justifyContent="center"
                        >
                        </Stack>
                    </Container>
                </Box>

                <Container sx={{ py: 8 }} maxWidth="md">
                    {/* End hero unit */}
                    <Grid container spacing={4}>
                        {cards.map((card) => (
                            <Grid item key={card} xs={12} sm={6} md={4}>
                                <Card
                                    sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}
                                >
                                    <FetchAPI />
                                    <CardContent sx={{ flexGrow: 1 }}>
                                    </CardContent>

                                </Card>
                            </Grid>
                        ))}
                    </Grid>
                </Container>
            </main>
        </ThemeProvider>
    );
}

FetchAPI.js

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


const FetchAPI = () => {

    const [show, setShow] = useState({});
    const [data, setData] = useState([]);

    const apiGet = () => {
        const API_KEY = "";
        fetch(`https://api.thedogapi.com/v1/images/search?limit=2&page=10&order=Desc?API_KEY=${API_KEY}`)
            .then((response) => response.json())
            .then((json) => {
                console.log(json);
                setData([...data, ...json]);
            });
    };

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

    return (

        <div>
            {data.map((item, id) => (
                <div>
                    <img alt="dog photos" className="dogImg" src={item.url}></img>
                    {show[id] === false ? <p>{JSON.stringify(item.breeds, null, '\t')}</p> : null}
                    <button onClick={() => setShow((prev) => ({ ...prev, [id]: false }))}>Learn more about this dog!</button>
                    <button onClick={() => setShow((prev) => ({ ...prev, [id]: true }))}>Hide information</button>
                </div>

            ))}
        </div>

    )
}

export default FetchAPI;

uj5u.com熱心網友回復：

您可以比較陣列的長度，例如：

if(arr.length===0){
   return "no information for this breed is available"
}

上述條件只是為了理解您可以更改邏輯以及您想要回傳或保存在某種狀態。

標籤：javascript 数组 反应 api

上一篇：如何使用LaravelSanctum限制SPAWeb應用程式的設備登錄

下一篇：帶有關系欄位的內容型別的StrapiPOSTapi