IF/ELSE 条件无法正常工作并且重新渲染重复 React

Question

我的目标是检查入住和退房日期，看看是否有房间

如果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 次

Answer 1

由于 HC 是一个额外的组件，每次 UseEffect 被调用时，它的所有子组件都会被更新。既然你设置了

price={prices}

在您的属性中，每次更新都会使每个子项具有相同的价格值。

相反，您可以直接从 availdata 数组中读取

price={availdata[p.roomId][date].p1}

Answer 2

    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>)



            }
            }

    }

    })

为此我决定只显示可用房间，直到我得到更好的建议。

Answer 3

更新：解决方案是

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>
                );
            }

        }

    })

IF/ELSE 条件无法正常工作并且重新渲染重复 React

IF/ELSE condition not working properly and Rerendring duplicates React

javascript

for-loop

if-statement

reactjs

react-native