如果您的应用程序具有简单状态：

• 只需将您的加载状态提升到父组件并作为 prop 传递给子组件。

如果您的应用中存在复杂状态：

Option 1-您可以为句柄加载状态创建一些React上下文，并在任何子组件中使用useContext。
Option 2-使用redux或react-query等状态管理来处理加载状态。

const useFetch = (url) => {
    const [data, setData] = useState(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => {
        axios.get(url)
            .then((res) => {
                setData(res.data)
                setLoading(false)
            }).catch(err => {
                setError(err)
                setLoading(false)
            })
    }, [url]);

    return { data, loading, error }
};

export default useFetch;

您可以像这样在组件中使用这个定制的钩子来进行动态使用

const { data, loading, errors } = useFetch('localhost:3000/api/user')

通过这种方式，你可以很容易地跟踪所有的请求，并可以实现你的加载器相应

loading ? <Loader /> : <Random />