React Native：JobSearch页面Datepicker无法显示Welcome页选中日期求助

核心问题分析 #

1. 路由参数映射错误：JobSearch页面的路由是/search/[id].js，动态参数名为id而非jobType，导致无法正确获取房型参数，间接影响日期参数的正常读取。
2. 缺少参数变化监听：当从Welcome页面多次传递不同日期时，JobSearch页面的date状态不会自动同步更新。

具体修改步骤 #

1. 修正JobSearch页面的路由参数获取 #

打开[id].js（JobSearch页面），修改参数解构逻辑：

// 原代码
const { selectedDate, jobType } = useLocalSearchParams();

// 修改后
const { id: jobType, selectedDate } = useLocalSearchParams();

2. 添加路由参数变化监听 #

在JobSearch页面的useEffect区域，新增监听selectedDate变化的逻辑，确保日期状态同步更新：

// 新增此useEffect
useEffect(() => {
  if (selectedDate) {
    setDate(new Date(selectedDate));
  }
}, [selectedDate]);

// 保留原有的搜索逻辑useEffect
useEffect(() => {
  handleSearch();
}, [date, page, jobType]);

3. 验证Welcome页面的日期传递逻辑（无需修改） #

Welcome页面的日期传递格式是正确的，确认router.push的参数拼接即可：

router.push(`/search/${item}?selectedDate=${selectedDate}`);

这里selectedDate由date.toISOString()生成标准ISO格式字符串，能被new Date()正确解析。

修改后的JobSearch核心代码片段 #

const JobSearch = () => {
  const router = useRouter();
  // 修正参数解构
  const { id: jobType, selectedDate } = useLocalSearchParams();

  const [date, setDate] = useState(
    selectedDate ? new Date(selectedDate) : new Date()
  );
  // ...其他状态定义

  // 新增监听selectedDate变化的useEffect
  useEffect(() => {
    if (selectedDate) {
      setDate(new Date(selectedDate));
    }
  }, [selectedDate]);

  // ...原有的handleSearch、handlePagination、onChange函数

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

  // ...渲染部分代码
};

内容的提问来源于stack exchange，提问作者Lowercase_