我要做的是顯示資料中的可用房間，我使用data.map 映射房間，使用availdata [p.roomId] [date].i檢查給定（入住和退房日期）之間是否有可用房間==0，如果不是，它將顯示可用房間。代碼作業正常，但一旦找到可用房間，它就會停止（這意味著它會在 else 陳述句處停止）并且不會尋找其余房間。有什么建議 ？使用中斷；與我面臨的問題沒有任何關系。
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])
console.log('ooooooooooh' result.availability[0][7264])
setIsLoading(true);
}
)
.catch((err) => console.log("error"));
}
useEffect(() => {
fetchData1();
}, []);
prices.length=0;
var strToDatein = new Date(checkkin)
var strToDateout = new Date(checkkout)
let trys = 0;
data.map((p) =>{
if (isLoading && isLoading2 ){
for (var day = strToDatein; day < strToDateout; day.setDate(day.getDate() 1)) {
HC.length=0;
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)
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>
);
}
uj5u.com熱心網友回復：
for您的代碼中的問題是回圈中的這個賦值：
var day = strToDatein;
日期是物件，物件不會被復制。參考被復制。day并strToDatein包含對同一物件的參考。day.setDate(day.getDate() 1)修改strToDatein. 找到第一個房間后，strToDatein < strToDateout回傳false并for跳過所有其他房間的回圈。
您可以使用回圈中Date物件的真實副本來解決您的問題：for
const data = [{
roomId: 0,
roomName: '0'
}, {
roomId: 1,
roomName: '1'
}, {
roomId: 2,
roomName: '2'
}];
const isLoading = true;
const isLoading2 = true;
const strToDatein = new Date(2022, 0, 1);
const strToDateout = new Date(2022, 0, 3);
const HC = [];
const availdata = [{
"20220101": {
i: 0,
p1: 100
}
}, {
"20220101": {
i: 2,
p1: 100
},
"20220102": {
i: 2,
p1: 100
},
"20220103": {
i: 2,
p1: 100
}
}, {
"20220101": {
i: 0,
p1: 100
}
}];
const rowss = [];
const prices = [];
function format(date) {
return `${date.getFullYear()}${`${date.getMonth() 1}`.padStart(2, 0)}${`${date.getDate()}`.padStart(2, 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)
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>');
}
}
}
});
console.log(HC);轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/450402.html
標籤：javascript 反应 循环 for循环 if 语句
上一篇：為什么我不能在這里命令時中斷？
下一篇：在非異步背景關系中訪問回圈屬性