英文:
Preventing Multiple Requests and Updating
问题
在提供的代码中，存在一个问题，即当选择日期时，getOpenHours函数被多次快速调用，并且openHours数组被重复更新为相同的值。需要修改此行为，仅在日期更改时执行该函数，并相应地更新openHours数组。需要帮助来解决此问题，确保仅在日期更改时调用getOpenHours函数。
const RoomDetailsPage = ({ route }) => {
// ...（省略其他代码）
const handleDateChange = async (date) => {
const formattedDate = date.replace(/\//g, "-");
const selectedDate = new Date(formattedDate);
// Only call getOpeningHours when the date is changed
if (selectedDate !== selectedDate) {
const hours = await getOpeningHours(selectedDate);
setOpenHours(hours);
}
setSelectedStartHour(null);
setSelectedEndHour(null);
setStartHour(null);
setEndHour(null);
};
// ...（省略其他代码）
};
以上代码将在日期更改时调用getOpeningHours函数，以确保仅在日期更改时更新openHours数组。
英文:
In the provided code, there seems to be an issue where the getOpenHours function is being called multiple times in quick succession when a date is selected. Additionally, the openHours Array is being updated with the same value repeatedly. This behavior should be modified to only execute the function when the date is changed, and to update the openHoursArray accordingly. Help is needed to resolve this issue and ensure that the getOpenHours function is only called when the date is changed.
<br>
const RoomDetailsPage = ({ route }) => {
const [selectedDate, setSelectedDate] = useState(null);
const [selectedStartHour, setSelectedStartHour] = useState(null);
const [selectedEndHour, setSelectedEndHour] = useState(null);
const [startHour, setStartHour] = useState(null);
const [endHour, setEndHour] = useState(null);
const [isDatePickerVisible, setDatePickerVisible] = useState(false);
const { roomId } = route.params;
const { placeId } = route.params;
const { roomDetails } = route.params;
const startDate = roomDetails.days[0].date.split("T")[0];
const endDate =
roomDetails.days[roomDetails.days.length - 1].date.split("T")[0];
const [openHours, setOpenHours] = useState([]);
const handleDateChange = async (date) => {
const formattedDate = date.replace(/\//g, "-");
const selectedDate = new Date(formattedDate);
const hours = await getOpeningHours(selectedDate);
setOpenHours(hours);
setSelectedStartHour(null);
setSelectedEndHour(null);
setStartHour(null);
setEndHour(null);
};
const getOpeningHours = async (date) => {
try {
const response = await axios.post(
`https://spacezone-backend.cyclic.app/api/booking/getOpenHours/${placeId}`,
{ Date: date }
);
return response.data.openHoursArray;
} catch (error) {
console.log(error);
return [];
}
};
return (
<View>
<Text style={styles.subtitle}>Select Date</Text>
<Text>Selected Date is {selectedDate}</Text>
<DatePicker
{/* This was imported from "react-native-modern-datepicker" */}
onSelectedChange={handleDateChange}
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 }}
/>
</View>
{/* 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>Loading open hours...</Text>
)}
</View>
);
i have tried so many things and i didn't solve the problem , if someone know the problem and how to solve it please tell me.
答案1
得分: 1
你可以尝试在 useEffect 钩子中使用异步函数，就像这样：
const [date, setDate] = useState();
useEffect(() => {
if (date){
const formattedDate = date.replace(/\//g, "-");
const selectedDate = new Date(formattedDate);
const getOpeningHours = async () => {
try {
const response = await axios.post(
`https://spacezone-backend.cyclic.app/api/booking/getOpenHours/${placeId}`,
{ Date: date }
);
setOpenHours(response.data.openHoursArray);
} catch (error) {
console.log(error);
}
};
getOpeningHours();
if(openHours && openHours.length !== 0){
setOpenHours(openHours);
setSelectedStartHour(null);
setSelectedEndHour(null);
setStartHour(null);
setEndHour(null);
}
}
}, [date])
然后在组件的返回部分，只需像这样更改日期的 state：
return (
<DatePicker
onSelectedChange={(value) => setDate(value)}
// 其他属性
/>
)
英文:
you can try using the async function inside a useEffect hook like this:
const [date, setDate] = useState();
useEffect(() => {
if (date){
const formattedDate = date.replace(/\//g, "-");
const selectedDate = new Date(formattedDate);
const getOpeningHours = async () => {
try {
const response = await axios.post(
`https://spacezone-backend.cyclic.app/api/booking/getOpenHours/${placeId}`,
{ Date: date }
);
setOpenHours(response.data.openHoursArray);
} catch (error) {
console.log(error);
}
};
getOpeningHours();
if(openHours && openHours.length !== 0){
setOpenHours(openHours);
setSelectedStartHour(null);
setSelectedEndHour(null);
setStartHour(null);
setEndHour(null);
}
}
}, [date])
and inside the return of your component only change the state of the date like this:
return (
<DatePicker
onSelectedChange={(value) => setDate(value)}
// other props
/>
)
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论