React调用API时Loader无法正常显示问题及实现方案求助

• 你的items状态初始值设置为了空数组[]，而JavaScript中空数组属于真值，所以你写的items ?判断会始终返回true，页面初始化直接进入列表渲染逻辑，Loader永远不会被触发。
• 就算你临时改成判断items.length，如果接口正常返回空列表的话，Loader会一直显示，逻辑也存在问题，更稳妥的做法是单独加一个加载状态。

方案1：新增独立loading状态（最推荐） #

新增一个isLoading状态专门控制Loader的显示，代码修改如下：

import React, { useState, useEffect } from "react";
import { ListGroup, Row, Card, Container, Col } from "react-bootstrap";
import Loader from "../components/Loader";

const fetchURL = "api/guide/";
const getItems = () => fetch(fetchURL).then((res) => res.json());

function Guide() {
    const [items, setItems] = useState([]);
    // 新增loading状态，初始为true表示正在加载
    const [isLoading, setIsLoading] = useState(true);
    useEffect(() => {
        getItems().then((data) => {
            setItems(data);
            // 数据获取完成后关闭加载状态
            setIsLoading(false);
        });
        // 可自行补充catch逻辑捕获接口异常
    }, []);
    // 先判断加载状态
    if (isLoading) return <Loader />;
    return (
        <Row>
            <Container fluid>
                {items.map((item) => (
                    <ListGroup
                        className="mb-3 my-3 p-1 rounded"
                        variant="success"
                    >
                        <ListGroup.Item
                            style={{
                                width: "auto",
                                height: "auto",
                            }}
                            className="mb-2 my-2 p-2 rounded"
                            variant="flush"
                        >
                            <Row>
                                <Col md="7">
                                    <h3 className="mx-3">
                                        <strong>{item.title}</strong>
                                    </h3>

                                    <Card.Body>
                                        <p>{item.description}</p>
                                    </Card.Body>
                                </Col>
                                <Col md="5">
                                    {item.ytVidLink ? (
                                        <Card className="my-2 p-2 rounded card border-light"> 
                                            <div className="video-responsive">
                                                <iframe
                                                    width="1200"
                                                    height="720"
                                                    src={`https://www.youtube.com/embed/${item.ytVidLink}`}
                                                    frameBorder="0"
                                                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                                    allowFullScreen
                                                    title="Embedded youtube"
                                                />
                                            </div>
                                        </Card>
                                    ) : (
                                        <div variant="light"> </div>
                                    )}
                                </Col>
                            </Row>
                        </ListGroup.Item>
                    </ListGroup>
                ))}
                {/* 可自行补充空列表提示 */}
                {items.length === 0 && <p>暂无指南数据</p>}
            </Container>
        </Row>
    );
}

export default Guide;

方案2：临时修改判断逻辑（仅应急，不推荐） #

如果确认接口不会返回空列表，可以暂时把判断条件改成items.length > 0，初始空数组时显示Loader：

// 把原来的items ? 判断替换为下面的逻辑
{items.length > 0 ? (
  // 原有列表渲染逻辑
) : (
  <Loader />
)}

注意：如果接口返回空列表，这个方案会一直显示Loader，体验不好，优先使用方案1。

内容的提问来源于stack exchange，提问作者bashasha umer