在加载实际对象之前，使用 Axios 和 useEffect 获取数据会导致 null。
不幸的是，在实际对象不为空之前，我无法使用对象解构。
我被迫使用钩子来检查对象是否为空。
例如，我想创建多个函数并将我的代码拆分为单独的函数以提高可读性。
这是我的 HTTP 请求钩子：
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);
在实际返回对象之前，我无法嵌套函数的实际问题。
有没有办法在不检查的情况下获取数据？或者更清洁的解决方案会有所帮助。
我想使用多个组件来拆分代码。
任何意见或建议将不胜感激。