在您的代码中，组件会在初始加载时调用 initContact 函数来获取数据。如果此请求尚未完成，initDataContent 的初始值为 undefined。根据您现有的逻辑，当 initDataContent?.hotelStatus 不是 ‘1’ 时，会渲染 <Empty /> 组件。这可能导致在数据还未加载完成之前显示空状态。
要避免这种情况，您可以添加一个加载状态，以便在等待数据时显示一个加载指示器，而不是直接渲染 <Empty />。以下是如何实现的步骤：
- 添加一个新的状态变量以跟踪加载状态。
- 在发送请求之前，将加载状态设置为
true，并在请求完成后将其设置回false。 - 在返回的 JSX 中根据加载状态条件渲染相应的内容。
修改后的代码如下：
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()
const [loading, setLoading] = useState(true) // 新增 loading 状态
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') {
console.log('initDataOrigin', initDataOrigin)
setInitDataContent(res?.content)
}
})
.finally(() => {
setLoading(false) // 请求结束后更新 loading 状态
})
}, [])
const renderPage = () => {
if (loading) { // 当 loading 为 true 时显示加载中的内容
return <div>正在加载...</div>
}
if (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
console.log('hotelId ', hotelId)
$tools.handleToService(hotelId)
}}
>
前往服务频道，使用服务
</div>
</div>
</>
)
} else {
return <Empty></Empty>
}
}
return <div className="home">{renderPage()}</div>
}
export default Home;
这样一来，在数据还没有返回之前，会显示 “正在加载…” 而不是 <Empty />，从而提供更好的用户体验。你可以根据需要自定义这个加载提示的信息或样式。
内容由零声教学AI助手提供，问题来源于学员提问
