reactjs - 使用 useEffect 结合 Axios 获取 API 数据返回 null - 如何处理？

Question

在实际对象加载之前，使用 Axios 和 useEffect 获取数据会导致 null。

不幸的是，在实际对象不为空之前我无法使用对象解构。

我被迫使用钩子(Hook)来检查对象是否为空。

例如，我想创建多个函数并将代码拆分为单独的函数以提高可读性。

这是我的 HTTP 请求 Hook :

import { useState, useEffect } from 'react';

import axios from 'axios';

export const useHttp = (url, dependencies) => {
    const [isLoading, setIsLoading] = useState(false);
    const [fetchedData, setFetchedData] = useState(null);

    useEffect(() => {
        setIsLoading(true);

        axios
            .get(url)
            .then(response => {
                setIsLoading(false);
                setFetchedData(response.data);
            })
            .catch(error => {
                console.error('Oops!', error);
                setIsLoading(false);
            });
    }, dependencies);

    return [isLoading, fetchedData];
};

接下来是我的页面组件:

import React from 'react';

import { PAGE_ABOUT, API_URL } from 'constants/import';

import Header from './sections/Header';
import Main from './sections/Main';
import Aside from './sections/Aside';

import { useHttp } from 'hooks/http';

const About = () => {
    const [isLoading, about] = useHttp(PAGE_ABOUT, []);

    if (!isLoading && about) {
        return (
            <section className="about">
                <div className="row">
                    <Header
                        featuredImage={API_URL + about.page_featured_image.path}
                        authorImage={API_URL + about.page_author_image.path}
                        authorImageMeta={about.page_author_image.meta.title}
                        title={about.about_title}
                        subtitle={about.about_subtitle}
                    />

                    <Main
                        title={about.page_title}
                        content={about.page_content}
                    />

                    <Aside
                        title={about.about_title}
                        content={about.about_content}
                    />
                </div>
            </section>
        );
    }
};

export default React.memo(About);

实际问题是我无法在对象实际返回之前嵌套函数。

有没有一种方法可以在不进行检查的情况下获取数据？或者更清洁的解决方案会有所帮助。

我想使用多个组件来拆分代码。

如有任何意见或建议，我们将不胜感激。

Answer 1

您所问的问题对用户界面不利。您不想在获取数据时阻止 UI 渲染。因此，常见的做法是显示“正在加载”微调器，或者(如果您指望请求速度很快)在弹出之前不渲染任何内容。

所以你会得到类似的东西:

const About = () => {
    const [isLoading, about] = useHttp(PAGE_ABOUT, []);

    if (isLoading) return null; // or <Loading />

    return (
       <section className="about">
            <div className="row">
                <Header
                    featuredImage={API_URL + about.page_featured_image.path}
                    authorImage={API_URL + about.page_author_image.path}
                    authorImageMeta={about.page_author_image.meta.title}
                    title={about.about_title}
                    subtitle={about.about_subtitle}
                />

                <Main
                  title={about.page_title}
                  content={about.page_content}
                />

                <Aside
                  title={about.about_title}
                  content={about.about_content}
                />
            </div>
        </section>
    );
};

如果您的 api 没有错误保护，并且您担心 null 或 未定义，您可以使用 Error Boundary 包装该组件。组件并显示默认错误。但这取决于您是否在应用程序中使用它们。

Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed. Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them.