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...-Go服务器开发

如果在代码中添加了加载状态的判断，但仍然出现 <Empty /> 组件，这可能是因为 initDataContent 的初始状态为 undefined，且在数据返回之前条件已经满足。为了避免这种情况，我们可以检查 loading 状态，并确保在数据请求完成之前不渲染与数据相关的部分。

这里是一些可能导致您看到 <Empty /> 的原因及其解决方案：

异步请求未完成: 当初始渲染时，loading 是 true，所以不会显示 <Empty />。但是当请求开始并结束后，如果在这段时间内（或没有获取到有效数据）再次调用 renderPage() 方法，就可能直接进入返回 <Empty /> 的分支。
设置初始值: 确保一开始 initDataContent 是 undefined，但当我们确认接口返回的数据后再进行更新。
条件逻辑: 确保你在处理请求结果的逻辑上要清晰，当业务代码不是 ‘1000’ 或者未找到相应的数据时应该有合理的默认处理。

以下是调整后的代码示例：

import React, { useEffect, useState } from 'react'
import './index.less'
import Contact from './contact'
import { initContact } from '@/api/handlers/common.api'
import hua from '@hweb/hua-js'
import ServicesDesc from './servicesDesc/servicesDesc'
import Empty from './empty'

const Home = (props) => {
  const [initDataContent, setInitDataContent] = useState(null); // 初始值设为 null
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    hua.setNavigationBarTitle('联系酒店');
    
    let params = {
      hotelId: props?.query?.hotelId,
    };
    
    for (const key in params) {
      if (Object.hasOwnProperty.call(params, key)) {
        !params[key] && delete params[key];
      }
    }

    initContact(params)
      .then((res) => {
        if (res?.businessCode === '1000') {
          setInitDataContent(res?.content);
        } else {
          // 可以考虑如何处理其他 businessCode，比如显示错误信息等
          console.warn("业务错误:", res?.businessCode);
        }
      })
      .catch((error) => {
        console.error("请求失败:", error);
      })
      .finally(() => {
        setLoading(false);
      });
  }, [props]);

  const renderPage = () => {
    if (loading) { // 如果正在加载，则返回 loading 信息
      return <div>正在加载中.............</div>;
    }

    // 检查 initDataContent 是否有效以及 hotelStatus
    if (initDataContent && initDataContent.hotelStatus === '1') {
      return (
        <>
          <div className="home-backgroundImg">
            <Contact content={initDataContent}></Contact>
            <ServicesDesc serviceIntroductionList={initDataContent.serviceIntroductionList}></ServicesDesc>
          </div>
          <div className="footer">
            <div
              className="footer-btn"
              onClick={() => {
                const { hotelId } = props.query;
                $tools.handleToService(hotelId);
              }}
            >
              前往服务频道，使用服务
            </div>
          </div>
        </>
      );
    } else {
      return <Empty></Empty>; // 只有当 hotelStatus 不为 '1' 或无效数据才会渲染 Empty
    }
  };

  return <div className="home">{renderPage()}</div>;
};

export default Home;