ZBLOG

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 Services...

以下是对你提供的 React 组件代码进行了一些优化和清理,以提高可读性和性能:

  1. import React, { useEffect, useState } from 'react';
  2. import './index.less';
  3. import Contact from './contact';
  4. import { initContact } from '@/api/handlers/common.api';
  5. import { initDataOrigin } from './mock';
  6. import hua from '@hweb/hua-js';
  7. import ServicesDesc from './servicesDesc/servicesDesc';
  8. import Empty from './empty';
  9. const Home = (props) => {
  10. const [initDataContent, setInitDataContent] = useState(null);
  11. const [loading, setLoading] = useState(true);
  12. useEffect(() => {
  13. hua.setNavigationBarTitle('联系酒店');
  14. const fetchData = async () => {
  15. const params = {
  16. hotelId: props?.query?.hotelId,
  17. };
  18. // Remove any undefined parameters
  19. Object.keys(params).forEach(key => {
  20. if (!params[key]) delete params[key];
  21. });
  22. try {
  23. const res = await initContact(params);
  24. if (res?.businessCode === '1000') {
  25. console.log('initDataOrigin', initDataOrigin);
  26. setInitDataContent(res.content);
  27. }
  28. } catch (error) {
  29. console.error("Error fetching contact data:", error);
  30. } finally {
  31. setLoading(false);
  32. // $tools.loading.close(); // Uncomment this line if you have loading logic in place
  33. }
  34. };
  35. fetchData();
  36. }, [props.query.hotelId]); // Add dependency for hotelId to refetch on change
  37. const renderPage = () => {
  38. if (loading) return <div>正在加载中.............</div>;
  39. if (initDataContent) {
  40. if (initDataContent.hotelStatus === '1') {
  41. return (
  42. <>
  43. <div className="home-backgroundImg">
  44. <Contact content={initDataContent} />
  45. <ServicesDesc serviceIntroductionList={initDataContent.serviceIntroductionList} />
  46. </div>
  47. <div className="footer">
  48. <div
  49. className="footer-btn"
  50. onClick={() => $tools.handleToService(props.query.hotelId)}
  51. >
  52. 前往服务频道,使用服务
  53. </div>
  54. </div>
  55. </>
  56. );
  57. } else {
  58. return <Empty />;
  59. }
  60. }
  61. return null; // Return null or a default component when there's no content.
  62. };
  63. return <div className="home">{renderPage()}</div>;
  64. };
  65. export default Home;

优化点:

  1. 异步函数:将数据获取逻辑放入一个异步函数 fetchData 中,这样代码更整洁。
  2. 参数过滤:使用 Object.keys() 方法简化了去除未定义参数的逻辑。
  3. 错误处理:在 API 调用时添加了 try-catch 来捕获可能的错误。
  4. 条件渲染:如果还没有获取到内容且正在加载,就返回加载中的提示,而不是直接调用 renderPage()
  5. 依赖项数组:在 useEffect 的依赖项中添加了 props.query.hotelId,这样可以在酒店 ID 改变时重新获取数据。

这些改动旨在提升代码的可读性、可维护性以及潜在的性能表现。


内容由零声教学AI助手提供,问题来源于学员提问

本站部分文章来源于网络,版权归原作者所有,如有侵权请联系站长删除。
转载请注明出处:https://golang.0voice.com/?id=20855

分享:
扫描分享到社交APP
上一篇
下一篇
发表列表
游客 游客
此处应有掌声~
评论列表

还没有评论,快来说点什么吧~

联系我们

在线咨询: 点击这里给我发消息

微信号:3007537140

上班时间: 10:30-22:30

关注我们
x

注册

已经有帐号?