多次React嵌套Map渲染

qoefvg9y 于 2023-01-09 发布在 React

关注(0)|答案(1)|浏览(159)

我不明白为什么要渲染多次。我需要Map可用时间和已预订时间，然后进行比较。比较时，我需要从可用时间中排除已预订的时间。我可以进行比较，但不明白为什么输出三次：（
举个例子。

- 现有预订：**

[开始日期时间：2023年5月6日09：00，结束日期时间：二○二三年五月六日上午十时三十分]
[开始日期时间：2023年5月6日10：30，结束日期时间：二○二三年五月六日中午十二时正]
[开始日期时间：2023年5月6日12：00，结束日期时间：二○二三年五月六日十三时三十分]

- 可用时间：**[09：00、09：15、09：30、09：45、10：00、10：15、10：30、10：45、11：00、11：15、11：30、11：45、12：00、12：15、12：30、12：45、13：00、13：15、13：30、13：45、14：00、14：15、14：30、14：45、15：00]

因此，如果availableTimeisSameOrAfter（startDateTime） 或 * isSameOrBefore（endDateTime）*，则从09：00到10：30的所有时间都应隐藏，下一个可显示的时间将是10：45
'

<View>
                        <ScrollView horizontal style={{paddingTop: 20, paddingBottom: 25}}>
                            { existingBookings.map((existingBooking, key) => {
                                return <ListItem key={key}>
                                    { availableTimes.map((index, item) => {
                                        let exBookingStartTime = existingBooking.stDate;
                                        let exBookingEndTime = existingBooking.enDate;
                                        let newDummyDate = "2023-01-06 " + index;
                                        let dummyMomentTest = moment(newDummyDate, 'YYYY-MM-DD HH:mm').format('YYYY-MM-DD HH:mm');

                                        if(moment(dummyMomentTest).isSameOrAfter(exBookingStartTime) && moment(dummyMomentTest).isSameOrBefore(exBookingEndTime)) {
                                            return buildTimeScrollView(index, item, 'Booked');
                                        } else {
                                            return buildTimeScrollView(index, item, 'Available');
                                        }
                                    })}
                                </ListItem>
                            })}
                        </ScrollView>
                    </View>

我得到的结果是部分正确的。虽然它是输出三次如下，因为我有3个现有的预订记录;

- 第一个输出**

预订的预订的预订的预订的预订的预订的预订的10：45

- 第二个输出加到第一个输出的末尾**

09：00 09：15 09：30 09：45 10：00 10：15 10：30预订预订预订预订预订预订预订预订预订预订

- 第三个输出加到第二个输出的末尾**

09：00 09：15 09：30 09：45 10：00 10：15 10：30 10：45 11：00 11：15 11：30 11：45已预订已预订已预订已预订已预订已预订

- 完整输出结果如下所示**已预订已预订已预订已预订已预订已预订09：00 09：15 09：30 09：45 10：00 10：15 10：30已预订已预订已预订已预订已预订已预订已预订09：00 09：15 09：30 09：45 10：00 10：15 10：30 10：45 11：00 11：15 11：30 11：45已预订已预订已预订已预订已预订已预订已预订已预订已预订已预订已预订

基本上，我只想从可用时间中排除现有预订中的时间

react-native

来源：https://stackoverflow.com/questions/75028391/react-nested-map-rendering-multiple-times

1条答案

按热度按时间

20jt8wwn1#

一个可能的解决方案

import * as React from 'react';
import {Text, View, ScrollView} from 'react-native';
import moment from 'moment';

const updateAvailableTimes = (
  bookings: Array<{stDate: string; enDate: string}>,
  availables: Array<string>,
  currDate: string,
) => {
  const newAvailables = [];
  for (const ava of availables) {
    const curr = moment(`${currDate} ${ava}`, 'YYYY-MM-DD hh:mm');
    let isBooked = false;
    for (const booking of bookings) {
      const st = moment(booking.stDate, 'YYYY-MM-DD hh:mm');
      const en = moment(booking.enDate, 'YYYY-MM-DD hh:mm');
      if (curr.isSameOrAfter(st) && curr.isSameOrBefore(en)) {
        newAvailables.push('Booked');
        isBooked = true;
        break;
      }
    }
    if (!isBooked) {
      newAvailables.push(ava);
    }
  }
  return newAvailables;
};

export default function Main() {
  const existingBookings = [
    {
      stDate: '2023-01-06 09:00',
      enDate: '2023-01-06 10:30',
    },
    {
      stDate: '2023-01-06 10:30',
      enDate: '2023-01-06 12:00',
    },
    {
      stDate: '2023-01-06 12:00',
      enDate: '2023-01-06 13:30',
    },
  ];

  const availableTimes = [
    '09:00',
    '09:15',
    '09:30',
    '09:45',
    '10:00',
    '10:15',
    '10:30',
    '10:45',
    '11:00',
    '11:15',
    '11:30',
    '11:45',
    '12:00',
    '12:15',
    '12:30',
    '12:45',
    '13:00',
    '13:15',
    '13:30',
    '13:45',
    '14:00',
    '14:15',
    '14:30',
    '14:45',
    '15:00',
  ];

  const currDate = '2023-01-06';

  return (
    <View
      style={{
        flex: 1,
        justifyContent: 'center',
      }}>
      <View style={{backgroundColor: 'lightgrey'}}>
        <ScrollView horizontal style={{paddingVertical: 20}}>
          {updateAvailableTimes(existingBookings, availableTimes, currDate).map(
            (val, idx) => {
              return (
                <View
                  key={idx}
                  style={{
                    marginHorizontal: 2,
                    borderWidth: 2,
                    borderColor: 'blue',
                    borderRadius: 10,
                    width: 80,
                    alignItems: 'center',
                  }}>
                  <Text>{val}</Text>
                </View>
              );
            },
          )}
        </ScrollView>
      </View>
    </View>
  );
}

过滤掉不可用时间的输出为["Booked", "Booked", "Booked", "Booked", "Booked", "Booked", "Booked", "Booked", "Booked", "Booked", "Booked", "Booked", "Booked", "Booked", "Booked", "Booked", "Booked", "Booked", "Booked", "13:45", "14:00", "14:15", "14:30", "14:45", "15:00"]

注解

updateAvailableTimes中使用的算法很简单，而且很慢，如果你的bookings和availables数组很短（例如，每个数组都少于100），简单算法应该足够快，但是如果它们的大小很大，你就必须优化它（例如，合并任何重叠的预订以减小其大小，根据预订对可用时间进行二进制搜索，等等）。

赞(0）回复(0）举报 2023-01-09

我来回答

多次React嵌套Map渲染

1条答案

注解

相关问题

热门标签

最新问答