优化React Native中的API请求与状态管理：避免重复调用与冗余更新

import React, { useState, useEffect } from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import axios from 'axios';
import DatePicker from 'react-native-modern-datepicker'; // 假设这是你使用的日期选择器

const RoomDetailsPage = ({ route }) => {
  const [selectedDate, setSelectedDate] = useState(null); // 用于DatePicker更新的日期字符串
  const [openHours, setOpenHours] = useState([]);
  const [selectedStartHour, setSelectedStartHour] = useState(null);
  const [selectedEndHour, setSelectedEndHour] = useState(null);
  const [startHour, setStartHour] = useState(null);
  const [endHour, setEndHour] = useState(null);
  // ... 其他状态和props

  const { placeId, roomDetails } = route.params;
  const startDate = roomDetails.days[0].date.split("T")[0];
  const endDate = roomDetails.days[roomDetails.days.length - 1].date.split("T")[0];

  // 1. 使用 useEffect 监听 selectedDate 的变化
  useEffect(() => {
    // 只有当 selectedDate 存在时才执行API请求
    if (selectedDate) {
      const fetchOpeningHours = async () => {
        try {
          // 确保日期格式符合后端API要求 (例如，从 "YYYY/MM/DD" 转换为 "YYYY-MM-DD")
          const formattedDateForApi = selectedDate.replace(/\//g, "-");

          const response = await axios.post(
            `https://spacezone-backend.cyclic.app/api/booking/getOpenHours/${placeId}`,
            { Date: formattedDateForApi }
          );
          setOpenHours(response.data.openHoursArray);

          // 成功获取新数据后，重置已选时间段，以避免旧数据残留
          setSelectedStartHour(null);
          setSelectedEndHour(null);
          setStartHour(null);
          setEndHour(null);
        } catch (error) {
          console.error("Error fetching opening hours:", error);
          setOpenHours([]); // API请求失败时清空开放时间
        }
      };

      fetchOpeningHours();
    }
  }, [selectedDate, placeId]); // 依赖项数组：当 selectedDate 或 placeId 变化时，重新运行此effect

  // handleHourPress 等其他函数...
  const handleHourPress = (hour) => {
    // ... 你的时间选择逻辑
  };

  return (
    <View>
      <Text style={styles.subtitle}>Select Date</Text>
      <Text>Selected Date is {selectedDate}</Text>
      <DatePicker
        onSelectedChange={(value) => setSelectedDate(value)} // 只更新 selectedDate 状态
        options={{
          backgroundColor: "#090C08",
          textHeaderColor: "#FFA25B",
          textDefaultColor: "#F6E7C1",
          selectedTextColor: "#fff",
          mainColor: "#F4722B",
          textSecondaryColor: "#D6C7A1",
          borderColor: "rgba(122, 146, 165, 0.1)",
        }}
        current="2023-06-01"
        mode="calendar"
        minimumDate={startDate}
        maximumDate={endDate}
        minuteInterval={30}
        style={{ borderRadius: 10 }}
      />

      {/* List of selectable hours */}
      {openHours && openHours.length > 0 ? (
        <>
          <Text style={styles.subtitle}>Select Hours</Text>
          <View style={styles.hoursContainer}>
            {openHours.map((hour) => (
              <TouchableOpacity
                key={hour}
                style={[
                  styles.hourCard,
                  hour === selectedStartHour || hour === selectedEndHour
                    ? styles.selectedHourCard
                    : null,
                ]}
                onPress={() => handleHourPress(hour)}
              >
                <Text>{hour}:00</Text>
              </TouchableOpacity>
            ))}
          </View>
        </>
      ) : (
        <Text>请选择日期以加载开放时间...</Text> // 改进加载提示
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  // ... 你的样式定义
  subtitle: { fontSize: 18, fontWeight: 'bold', marginTop: 10 },
  hoursContainer: { flexDirection: 'row', flexWrap: 'wrap', marginTop: 10 },
  hourCard: {
    padding: 10,
    margin: 5,
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 5,
  },
  selectedHourCard: {
    backgroundColor: '#F4722B',
  },
});

export default RoomDetailsPage;