頁面加載時在React中加載組件不顯示

我有一個頁面顯示來自 API 的媒體，并創建了一個加載組件以在加載 API 時顯示加載狀態。我能夠讓加載組件顯示在顯示 API 中的 1 個專案的頁面上，但在另一個我正在加載多個專案的頁面上它不顯示。我將如何為此創建一個加載組件？

    export default function Explore() {
    const [media, setMedia] = useState([]);
    const [faves, setFaves] = useState([]);

    useEffect(() => {
        const abortController = new AbortController();
        const opts = { signal: abortController.signal };

        fetch(`https://api.nasa.gov/planetary/apod?api_key=${apiKey}&count=15`, opts)
            .then((response) => response.json())
            .then((data) => setMedia(data))
            .catch((error) => console.log(error.message));
        return () => abortController.abort();
    }, []);

    if (!media) return <Loading />;

    const addFave = (fave) => {
        const isAlreadyStarred = faves.filter(
            item => item === fave
        )

        if (isAlreadyStarred.length > 0) {
            return;
        }
        const newFavesList = [...faves, fave];
        setFaves(newFavesList);
        // saveToLocalStorage(newFavesList);
    };

    const removeFave = (e) => {
        const url = e.target.getAttribute("url")
        setFaves(faves.filter(favorite => favorite.url !== url));
    };

    return (...)

以不同方式獲取 API 時顯示加載組件：

export default function Today() {
            const [mediaData, setMediaData] = useState(null);
        
            useEffect(() => {
                fetchMedia();
                async function fetchMedia() {
                    const res = await fetch(`https://api.nasa.gov/planetary/apod?api_key=${apiKey}`);
                    const data = await res.json();
                    setMediaData(data);
                    console.log(data);
                }
            }, []);
        
            if (!mediaData) return <Loading />;
        
            return (...)

uj5u.com熱心網友回復：

![]是假的。如果你把它改成類似

if (!media.length) return <Loading />;

那應該適合你

uj5u.com熱心網友回復：

這是因為您使用 which 進行初始化media，[]這是一個真實值，所以 check if (!media)( ![]) 將評估為false。

您可以media使用null、 check!media.length或更好地具有如下加載狀態進行初始化：

const [media, setMedia] = useState([])
const [loading, setLoading] = useState(false)

useEffect(() => {
        setLoading(true)

        const abortController = new AbortController();
        const opts = { signal: abortController.signal };

        fetch(`https://api.nasa.gov/planetary/apod?api_key=${apiKey}&count=15`, opts)
            .then((response) => response.json())
            .then((data) => setMedia(data))
            .catch((error) => console.log(error.message))
            .finally(() => setLoading(false));

        return () => abortController.abort();
    }, []);

if (loading) return <Loading />;

這樣您還可以添加一條空訊息：

const [media, setMedia] = useState([])
const [loading, setLoading] = useState(false)

useEffect(() => {
        setLoading(true)

        const abortController = new AbortController();
        const opts = { signal: abortController.signal };

        fetch(`https://api.nasa.gov/planetary/apod?api_key=${apiKey}&count=15`, opts)
            .then((response) => response.json())
            .then((data) => setMedia(data))
            .catch((error) => console.log(error.message))
            .finally(() => setLoading(false));

        return () => abortController.abort();
    }, []);

if (loading) return <Loading />;

if (!media || media.length < 1) return 'No data';

標籤：

上一篇：在v4mui層上定位模態背景的顏色？

下一篇：使用擴展運算子更改React狀態物件