當eventList,auctionList,subscriptionList,conferenceList,dividendList都無資料時calendarEntries自動略過，可以在 JSX 中加入條件判斷，確保當 eventList、auctionList、subscriptionList、conferenceList 和 dividendList 都是空值的時候自動讓上層的 calendarEntries 略過。將整個 entry 元件的渲染包在條件檢查內，這樣當沒有任何有效資料時就不會渲染該區塊。 這樣當所有的列表都為空時，該 entry 就會被自動略過，不會渲染到畫面上。
原本寫法
<div className='bg-white shadow-lg rounded-xl p-8 mb-8'>
{/* 新增顯示所有行事曆事件的區塊 */}
<h2 className='text-3xl font-bold text-gray-800 mb-4'>
財經行事曆事件
</h2>
<div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6'>
{calendarEntries.map((entry, index) => (
<div
key={index}
className='bg-white shadow-lg rounded-xl p-6 transition hover:-translate-y-1'>
<h3 className='text-xl font-semibold text-gray-700 mb-4'>
日期: {entry.date}
</h3>
{entry.eventList?.length > 0 && (
<div>
<h4 className='font-medium text-gray-600 mb-2 mt-2'>
活動列表:
</h4>
<ul className='list-decimal list-inside text-gray-600'>
{entry.eventList.map((event, idx) => (
<li key={idx}>
<a href={event.linkUrl} className='hover:underline'>
{event.title}
</a>
</li>
))}
</ul>
</div>
)}
{entry.auctionList?.length > 0 && (
<div>
<h4 className='font-medium text-gray-600 mb-2 mt-2'>
競拍列表:
</h4>
<ul className='list-decimal list-inside text-gray-600'>
{entry.auctionList.map((auction, idx) => (
<li key={idx}>
<a href={auction.linkUrl} className='hover:underline'>
{auction.company} (股票代號: {auction.stkNo})
</a>
</li>
))}
</ul>
</div>
)}
{entry.subscriptionList?.length > 0 && (
<div>
<h4 className='font-medium text-gray-600 mb-2 mt-2'>
申購列表:
</h4>
<ul className='list-decimal list-inside text-gray-600'>
{entry.subscriptionList.map((subscription, idx) => (
<li key={idx}>
<a
href={subscription.linkUrl}
className='hover:underline'>
{subscription.company} (股票代號: {subscription.stkNo}
)
</a>
</li>
))}
</ul>
</div>
)}
{entry.conferenceList?.length > 0 && (
<div>
<h4 className='font-medium text-gray-600 mb-2 mt-2'>
法說會列表:
</h4>
<ul className='list-decimal list-inside text-gray-600'>
{entry.conferenceList.map((conference, idx) => (
<li key={idx}>
<a
href={conference.linkUrl}
className='hover:underline'>
{conference.company} (股票代號: {conference.stkNo})
</a>
</li>
))}
</ul>
</div>
)}
{entry.dividendList?.length > 0 && (
<div>
<h4 className='font-medium text-gray-600 mb-2 mt-2'>
除權息列表:
</h4>
<ul className='list-decimal list-inside text-gray-600'>
{entry.dividendList.map((dividend, idx) => (
<li key={idx}>
<a href={dividend.linkUrl} className='hover:underline'>
{dividend.company} (股票代號: {dividend.stkNo})
</a>
</li>
))}
</ul>
</div>
)}
</div>
))}
</div>
</div>調整後寫法
<div className='bg-white shadow-lg rounded-xl p-8 mb-8'>
{/* 新增顯示所有行事曆事件的區塊 */}
<h2 className='text-3xl font-bold text-gray-800 mb-4'>財經行事曆事件</h2>
<div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6'>
{calendarEntries
.filter(
(entry) =>
entry.eventList?.length > 0 ||
entry.auctionList?.length > 0 ||
entry.subscriptionList?.length > 0 ||
entry.conferenceList?.length > 0 ||
entry.dividendList?.length > 0
)
.map((entry, index) => (
<div
key={index}
className='bg-white shadow-lg rounded-xl p-6 transition hover:-translate-y-1'>
<h3 className='text-xl font-semibold text-gray-700 mb-4'>日期: {entry.date}</h3>
{entry.eventList?.length > 0 && (
<div>
<h4 className='font-medium text-gray-600 mb-2 mt-2'>活動列表:</h4>
<ul className='list-decimal list-inside text-gray-600'>
{entry.eventList.map((event, idx) => (
<li key={idx}>
<a href={event.linkUrl} className='hover:underline'>
{event.title}
</a>
</li>
))}
</ul>
</div>
)}
{entry.auctionList?.length > 0 && (
<div>
<h4 className='font-medium text-gray-600 mb-2 mt-2'>競拍列表:</h4>
<ul className='list-decimal list-inside text-gray-600'>
{entry.auctionList.map((auction, idx) => (
<li key={idx}>
<a href={auction.linkUrl} className='hover:underline'>
{auction.company} (股票代號: {auction.stkNo})
</a>
</li>
))}
</ul>
</div>
)}
{entry.subscriptionList?.length > 0 && (
<div>
<h4 className='font-medium text-gray-600 mb-2 mt-2'>申購列表:</h4>
<ul className='list-decimal list-inside text-gray-600'>
{entry.subscriptionList.map((subscription, idx) => (
<li key={idx}>
<a href={subscription.linkUrl} className='hover:underline'>
{subscription.company} (股票代號: {subscription.stkNo})
</a>
</li>
))}
</ul>
</div>
)}
{entry.conferenceList?.length > 0 && (
<div>
<h4 className='font-medium text-gray-600 mb-2 mt-2'>法說會列表:</h4>
<ul className='list-decimal list-inside text-gray-600'>
{entry.conferenceList.map((conference, idx) => (
<li key={idx}>
<a href={conference.linkUrl} className='hover:underline'>
{conference.company} (股票代號: {conference.stkNo})
</a>
</li>
))}
</ul>
</div>
)}
{entry.dividendList?.length > 0 && (
<div>
<h4 className='font-medium text-gray-600 mb-2 mt-2'>除權息列表:</h4>
<ul className='list-decimal list-inside text-gray-600'>
{entry.dividendList.map((dividend, idx) => (
<li key={idx}>
<a href={dividend.linkUrl} className='hover:underline'>
{dividend.company} (股票代號: {dividend.stkNo})
</a>
</li>
))}
</ul>
</div>
)}
</div>
))}
</div>
</div>
+ There are no comments
Add yours