日期选择器不会显示所选日期

Question

为什么 JobSearch 上的日期选择器显示当前日期而不是我在欢迎页面上选择的日期？我做了 useLocalSearchParams 并尝试传递“Welcome to jobSearch”中选择的日期，我是初学者，请帮助我（我从 chatgpt 获得的大部分代码）

欢迎.js

import React, { useState } from "react";
import {
  View,
  Text,
  TouchableOpacity,
  Image,
  FlatList,
  Platform,
} from "react-native";
import DateTimePicker from "@react-native-community/datetimepicker";
import { useRouter } from "expo-router";

import styles from "./welcome.style";
import { icons, SIZES } from "../../../constants";

const jobTypes = ["Single bed", "Double bed", "Queen bed"];

const Welcome = ({ searchTerm, setSearchTerm, handleClick }) => {
  const router = useRouter();
  const [activeJobType, setActiveJobType] = useState("Single bed");
  const [date, setDate] = useState(new Date());
  const [showDatePicker, setShowDatePicker] = useState(false);

  const onChange = (event, selectedDate) => {
    if (event.type === "set") {
      const currentDate = selectedDate || date;
      setShowDatePicker(false);
      setDate(currentDate);
      setSearchTerm(currentDate.toDateString());
    } else {
      setShowDatePicker(false);
    }
  };

  const showDatepicker = () => {
    setShowDatePicker(true);
  };

  return (
    <View>
      <View style={styles.container}>
        <Text style={styles.userName}>Hello Rey</Text>
        <Text style={styles.welcomeMessage}>
          Enjoy your holiday with wikuhotel!
        </Text>
      </View>

      <View style={styles.searchContainer}>
        <View style={styles.searchWrapper}>
          <TouchableOpacity onPress={showDatepicker} style={styles.searchInput}>
            <Text style={styles.dateText}>
              {date ? date.toDateString() : "Select a date"}
            </Text>
          </TouchableOpacity>
        </View>

        <TouchableOpacity style={styles.searchBtn} onPress={handleClick}>
          <Image
            source={icons.search}
            resizeMode="contain"
            style={styles.searchBtnImage}
          />
        </TouchableOpacity>

        {showDatePicker && (
          <DateTimePicker
            value={date}
            mode="date"
            display={Platform.OS === "ios" ? "spinner" : "default"}
            onChange={onChange}
            maximumDate={new Date(2100, 0, 1)}
            minimumDate={new Date()}
          />
        )}
      </View>

      <View style={styles.tabsContainer}>
        <FlatList
          data={jobTypes}
          renderItem={({ item }) => (
            <TouchableOpacity
              style={styles.tab(activeJobType, item)}
              onPress={() => {
                setActiveJobType(item);
                const selectedDate = date.toISOString();
                router.push(`/search/${item}?selectedDate=${selectedDate}`);
              }}
            >
              <Text style={styles.tabText(activeJobType, item)}>{item}</Text>
            </TouchableOpacity>
          )}
          keyExtractor={(item) => item}
          contentContainerStyle={{ columnGap: SIZES.small }}
          horizontal
        />
      </View>
    </View>
  );
};

export default Welcome;

[id].js（职位搜索）

import React, { useEffect, useState } from "react";
import {
  ActivityIndicator,
  FlatList,
  Image,
  TouchableOpacity,
  View,
  Platform,
} from "react-native";
import { Stack, useRouter, useLocalSearchParams } from "expo-router";
import { Text, SafeAreaView } from "react-native";
import DateTimePicker from "@react-native-community/datetimepicker";
import axios from "axios";

import { ScreenHeaderBtn, NearbyJobCard } from "../../components";
import { COLORS, icons, SIZES } from "../../constants";
import styles from "../../styles/search";

const JobSearch = () => {
  const router = useRouter();
  const { selectedDate, jobType } = useLocalSearchParams();

  const [date, setDate] = useState(
    selectedDate ? new Date(selectedDate) : new Date()
  );
  const [searchResult, setSearchResult] = useState([]);
  const [searchLoader, setSearchLoader] = useState(false);
  const [searchError, setSearchError] = useState(null);
  const [page, setPage] = useState(1);
  const [showDatePicker, setShowDatePicker] = useState(false);

  const handleSearch = async () => {
    setSearchLoader(true);
    setSearchResult([]);
    setSearchError(null);

    try {
      const formattedDate = date.toISOString().split("T")[0];
      const options = {
        method: "GET",
        url: "https://jsearch.p.rapidapi.com/search",
        headers: {
          "x-rapidapi-key":
            "0c5bd52945msh21fcc24b54ab482p1060bejsn1483b70ea4ac",
          "x-rapidapi-host": "jsearch.p.rapidapi.com",
        },
        params: {
          query: jobType || "hotel",
          date: formattedDate,
          page: page.toString(),
        },
      };

      const response = await axios.request(options);
      setSearchResult(response.data.data);
    } catch (error) {
      setSearchError(error);
      console.log(error);
    } finally {
      setSearchLoader(false);
    }
  };

  const handlePagination = (direction) => {
    if (direction === "left" && page > 1) {
      setPage(page - 1);
    } else if (direction === "right") {
      setPage(page + 1);
    }
  };

  const onChange = (event, selectedDate) => {
    if (event.type === "set") {
      const currentDate = selectedDate || date;
      setShowDatePicker(Platform.OS === "ios");
      setDate(currentDate);
    } else {
      setShowDatePicker(false);
    }
  };

  useEffect(() => {
    handleSearch();
  }, [date, page, jobType]);

  return (
    <SafeAreaView style={{ flex: 1, backgroundColor: COLORS.lightWhite }}>
      <Stack.Screen
        options={{
          headerStyle: { backgroundColor: COLORS.lightWhite },
          headerShadowVisible: false,
          headerLeft: () => (
            <ScreenHeaderBtn
              iconUrl={icons.left}
              dimension="60%"
              handlePress={() => router.back()}
            />
          ),
          headerTitle: "",
        }}
      />

      <View style={styles.container}>
        <Text style={styles.searchTitle}>All rooms available for:</Text>
        <TouchableOpacity
          onPress={() => setShowDatePicker(true)}
          style={styles.datePickerButton}
        >
          <Text style={styles.datePickerText}>
            {date ? date.toDateString() : "Select a date"}
          </Text>
        </TouchableOpacity>
      </View>

      {showDatePicker && (
        <DateTimePicker
          value={date}
          mode="date"
          display="default"
          onChange={onChange}
          maximumDate={new Date(2100, 0, 1)}
          minimumDate={new Date()}
        />
      )}

      <FlatList
        data={searchResult}
        renderItem={({ item }) => (
          <NearbyJobCard
            job={item}
            handleNavigate={() => router.push(`/job-details/${item.job_id}`)}
          />
        )}
        keyExtractor={(item) => item.job_id}
        contentContainerStyle={{ padding: SIZES.medium, rowGap: SIZES.medium }}
        ListHeaderComponent={() => (
          <>
            <View style={styles.container}>
              <Text style={styles.noOfSearchedJobs}>
                {searchResult.length > 0
                  ? `${
                      searchResult.length
                    } Job Opportunities for ${date.toDateString()}`
                  : "No job opportunities found"}
              </Text>
            </View>
            <View style={styles.loaderContainer}>
              {searchLoader ? (
                <ActivityIndicator size="large" color={COLORS.primary} />
              ) : (
                searchError && (
                  <Text>Oops, something went wrong. Please try again.</Text>
                )
              )}
            </View>
          </>
        )}
        ListFooterComponent={() => (
          <View style={styles.footerContainer}>
            <TouchableOpacity
              style={styles.paginationButton}
              onPress={() => handlePagination("left")}
            >
              <Image
                source={icons.chevronLeft}
                style={styles.paginationImage}
                resizeMode="contain"
              />
            </TouchableOpacity>
            <View style={styles.paginationTextBox}>
              <Text style={styles.paginationText}>{page}</Text>
            </View>
            <TouchableOpacity
              style={styles.paginationButton}
              onPress={() => handlePagination("right")}
            >
              <Image
                source={icons.chevronRight}
                style={styles.paginationImage}
                resizeMode="contain"
              />
            </TouchableOpacity>
          </View>
        )}
      />
    </SafeAreaView>
  );
};

export default JobSearch;

我应该在哪里更改代码？

Answer 1

问题可能是

selectedDate

在通过之前格式不正确。以

selectedDate

格式传递

YYYY-MM-DD

，如下

const selectedDate = date.toISOString().split("T")[0];
router.push(`/search/${item}?selectedDate=${selectedDate}`);

您还可以调整代码获取日期的方式

const [date, setDate] = useState(() => {
  return selectedDate ? new Date(selectedDate) : new Date();
});