我的目標是檢查入住和退房日期，看看是否有房間
如果availdata[p.roomId][date].i==0那么該日期范圍內的房間不可用，那么它將顯示為不可用
如果不是，它將檢查其價格availdata[p.roomId][date].p1并改為顯示價格
import React,{useState,useEffect} from 'react';
import HotelCards from './HotelCards';
import styles from '../styles/Options/Options.module.css';
import {Checkkout as checkkout} from "./Hero";
import {Checkkin as checkkin} from "./Hero";
import {format} from "date-fns";
let HC=[];
let prices =[];
let notavailableat="";
let rowss=[];
export default function Options({selectedGuest}) {
const [availdata, setavailData] = useState([]);
const [isLoading, setIsLoading] = useState(false);
const [isLoading2, setIsLoading2] = useState(false);
const [data, setData] = useState([]);
// request Headers
const requestOptions = {
method: 'GET',
headers: { 'Content-Type': 'application/json' },
};
const requestOptions2 = {
method: 'GET',
headers: { 'Content-Type': 'application/json' },
};
//Get the rooms info along with the ID
const fetchData = () => {
fetch('http://localhost:3001/api/rooms', requestOptions)
.then(response => response.json())
.then((result) =>{
console.log("roooms" result)
setData(result.rooms)
setIsLoading2(true);
}
)
.catch((err) => console.log("error"));
};
useEffect(() => {
fetchData();
}, []);
//get the i and p variables
function fetchData1() {
fetch('http://localhost:3001/api/availability', requestOptions2)
.then(response => response.json())
.then((result) =>{
setavailData(result.availability[0])
setIsLoading(true);
}
)
.catch((err) => console.log("error"));
}
useEffect(() => {
fetchData1();
}, []);
prices.length=0;
var strToDatein = new Date(checkkin)
var strToDateout = new Date(checkkout)
{data.map(p=> {
if (isLoading && isLoading2){
for (var day = strToDatein; day <= strToDateout; day.setDate(day.getDate() 1)) {
var diplaydate = format(day,"dd MMM ");
var date = format(day, 'yyyyMMdd');
if (availdata[p.roomId][date].i==0){
rowss.push(<p key={availdata[p.roomId][date]}> not available at {diplaydate} </p>);
notavailableat="not available at " diplaydate;
prices.length=0;
console.log("room:" p.roomId "available?" availdata[p.roomId][date].i)
HC.push(<div key={p.roomId}>
<HotelCards
idroom={p.roomId}
title={p.roomName.toUpperCase()}
status={true}
price={prices}
img={p.pictures[0].url}
avail={notavailableat}
rows={rowss}
guest={selectedGuest}
/></div>)
break;
}
else
{
rowss.length=0;
prices.push(availdata[p.roomId][date].p1);
console.log("room:" p.roomId "price?" availdata[p.roomId][date].p1)
HC.push(<div key={p.roomId}>
<HotelCards
idroom={p.roomId}
title={p.roomName.toUpperCase()}
status={true}
price={prices}
img={p.pictures[0].url}
avail={notavailableat}
rows={rowss}
guest={selectedGuest}
/></div>)
}
}
}
})
return (
<div className={`${styles.containers}`}>
{HC}
</div>
);
}}
在我的情況下，它以相同的價格顯示每個房間 4 次
uj5u.com熱心網友回復：
由于 HC 是一個額外的組件，因此每次UseEffect呼叫它的所有子組件都會更新。既然你設定
price={prices}
在您的屬性中，每次更新都會使每個孩子都具有相同的價格價值。
相反，您可以直接從availdata陣列中讀取
price={availdata[p.roomId][date].p1}
uj5u.com熱心網友回復：
if (isLoading && isLoading2 && availdata[p.roomId]){
for (var day = strToDatein; day < strToDateout; day.setDate(day.getDate() 1)) {
HC.length=0;
var diplaydate = format(day,"dd MMM ");
var date = format(day, 'yyyyMMdd');
if (availdata[p.roomId][date].i==0){
rowss.push(<p key={availdata[p.roomId][date]}> not available at {diplaydate} </p>);
notavailableat="not available at " diplaydate;
break;
}
else
{console.log("dateeee" date);
rowss.length=0;
prices.length=0;
prices.push(availdata[p.roomId][date].p1);
var total_price = 0;
if(prices.length!==0){
for (var i=0;i<=prices.length-1;i ){
total_price =parseFloat(prices[i]);
}
}
HC.push(<div key={p.roomId}>
<HotelCards
idroom={p.roomId}
title={p.roomName.toUpperCase()}
status={true}
price={total_price}
img={p.pictures[0].url}
avail={1111}
rows={rowss}
guest={selectedGuest}
/></div>)
}
}
}
})
為此，我決定只顯示可用的房間，直到我得到更好的建議。
uj5u.com熱心網友回復：
更新：解決方案是
function format(date) {
return `${date.getFullYear()}${`${date.getMonth() 1}`.padStart(2, 0)}${`${date.getDate()}`.padStart(2, 0)}`;
}
HC.length=0;
data.forEach((p) =>{
if (isLoading && isLoading2 ){
for (var day = new Date(strToDatein); day < strToDateout; day.setDate(day.getDate() 1)) {
console.log(day "dekhel for");
var diplaydate = format(day,"dd MMM ");
var date = format(day, 'yyyyMMdd');
if (availdata[p.roomId][date].i==0){
rowss.push(<p key={availdata[p.roomId][date]}> not available at {diplaydate} </p>);
notavailableat="not available at " diplaydate;
console.log( p.roomId "not available at " diplaydate)
HC.push(<div key={p.roomId}>
<HotelCards
idroom={p.roomId}
title={p.roomName.toUpperCase()}
status={true}
price={0}
img={p.pictures[0].url}
avail={1111}
rows={rowss}
guest={selectedGuest}
/></div>)
break;
}
else
{console.log("dateeee" date);
rowss.length=0;
prices.length=0;
prices.push(availdata[p.roomId][date].p1);
var total_price = 0;
if(prices.length!==0){
for (var i=0;i<=prices.length-1;i ){
total_price =parseFloat(prices[i]);
}
}
console.log("room:" p.roomId "price?" availdata[p.roomId][date].p1)
HC.push(<div key={p.roomId}>
<HotelCards
idroom={p.roomId}
title={p.roomName.toUpperCase()}
status={true}
price={total_price}
img={p.pictures[0].url}
avail={1111}
rows={rowss}
guest={selectedGuest}
/></div>)
}
return (
<div className={`${styles.containers}`}>
{HC }
</div>
);
}
}
})
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/451801.html