以下是对你提供的 React 组件代码进行了一些优化和清理，以提高可读性和性能：
import React, { useEffect, useState } from 'react';
import './index.less';
import Contact from './contact';
import { initContact } from '@/api/handlers/common.api';
import { initDataOrigin } from './mock';
import hua from '@hweb/hua-js';
import ServicesDesc from './servicesDesc/servicesDesc';
import Empty from './empty';
const Home = (props) => {
const [initDataContent, setInitDataContent] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
hua.setNavigationBarTitle('联系酒店');
const fetchData = async () => {
const params = {
hotelId: props?.query?.hotelId,
};
// Remove any undefined parameters
Object.keys(params).forEach(key => {
if (!params[key]) delete params[key];
});
try {
const res = await initContact(params);
if (res?.businessCode === '1000') {
console.log('initDataOrigin', initDataOrigin);
setInitDataContent(res.content);
}
} catch (error) {
console.error("Error fetching contact data:", error);
} finally {
setLoading(false);
// $tools.loading.close(); // Uncomment this line if you have loading logic in place
}
};
fetchData();
}, [props.query.hotelId]); // Add dependency for hotelId to refetch on change
const renderPage = () => {
if (loading) return <div>正在加载中.............</div>;
if (initDataContent) {
if (initDataContent.hotelStatus === '1') {
return (
<>
<div className="home-backgroundImg">
<Contact content={initDataContent} />
<ServicesDesc serviceIntroductionList={initDataContent.serviceIntroductionList} />
</div>
<div className="footer">
<div
className="footer-btn"
onClick={() => $tools.handleToService(props.query.hotelId)}
>
前往服务频道，使用服务
</div>
</div>
</>
);
} else {
return <Empty />;
}
}
return null; // Return null or a default component when there's no content.
};
return <div className="home">{renderPage()}</div>;
};
export default Home;
优化点：
- 异步函数：将数据获取逻辑放入一个异步函数
fetchData中，这样代码更整洁。 - 参数过滤：使用
Object.keys()方法简化了去除未定义参数的逻辑。 - 错误处理：在 API 调用时添加了
try-catch来捕获可能的错误。 - 条件渲染：如果还没有获取到内容且正在加载，就返回加载中的提示，而不是直接调用
renderPage()。 - 依赖项数组：在
useEffect的依赖项中添加了props.query.hotelId，这样可以在酒店 ID 改变时重新获取数据。
这些改动旨在提升代码的可读性、可维护性以及潜在的性能表现。
内容由零声教学AI助手提供，问题来源于学员提问
