ReactJS中如何基于DatePicker选择更新接口参数？

核心问题分析 #

• startTimeStamp 是 minDate 函数内部的局部变量，loadData 函数无法访问到它，直接导致报错 undefined startTimeStamp。
• 日期选择变化时，仅调用 minDate 打印时间戳，但未触发接口重新请求；组件初始化阶段也没有生成有效的时间戳供第一次请求使用。

修复方案 #

1. 将 startTimeStamp 声明为组件状态，让整个组件都能访问，且状态变化时可自动触发接口请求。
2. 重构时间戳计算逻辑，生成时间戳后直接更新状态。
3. 调整 useEffect 的依赖项，监听 startTimeStamp 变化，自动调用接口更新数据。
4. 组件初始化时先计算初始时间戳，确保第一次请求有合法参数。

修改后的完整代码 #

import { useState, useEffect } from 'react';
import DatePicker from 'react-datepicker';
import moment from 'moment';

const MainCalendar = (props) => {
    const [isLoading, setLoading] = useState(true);
    const [data, setData] = useState([]);
    const [startDate, setStartDate] = useState(new Date());
    // 新增状态存储时间戳，解决作用域问题
    const [startTimeStamp, setStartTimeStamp] = useState('');

    // 重构：计算时间戳并更新状态
    const calculateStartTimeStamp = (date) => {
        const dateStart = new Date(date);
        dateStart.setDate(dateStart.getDate() - 1);
        dateStart.setHours(23, 0, 0, 0);
        const ts = moment(dateStart).format("x");
        setStartTimeStamp(ts);
    };

    // 初始化时计算初始时间戳
    useEffect(() => {
        calculateStartTimeStamp(startDate);
    }, []);

    // 监听时间戳变化，自动触发数据请求
    useEffect(() => {
        if (startTimeStamp) {
            loadData();
        }
    }, [startTimeStamp]);

    const loadData = async () => {
        setLoading(true);
        try {
            const res = await axiosConfig.get(`/${startTimeStamp}/posts`);
            setData(res.data);
        } catch (err) {
            console.error('数据请求失败:', err);
        } finally {
            setLoading(false);
        }
    };

    return (
        <>
            {isLoading ? <Loader /> : (
                <DatePicker
                    selected={startDate}
                    onChange={(date) => {
                        setStartDate(date);
                        // 日期变化时重新计算时间戳
                        calculateStartTimeStamp(date);
                    }}
                />
            )}
            {/* 可选：渲染获取到的数据 */}
            {!isLoading && data.length > 0 && (
                <div className="data-list">
                    {data.map(item => (
                        <div key={item.id} className="data-item">
                            {item.title}
                        </div>
                    ))}
                </div>
            )}
        </>
    );
};

export default MainCalendar;

关键修改说明 #

• 新增 startTimeStamp 状态，彻底解决变量作用域问题，让 loadData 能正常访问时间戳。
• 把原来的 minDate 改为 calculateStartTimeStamp，专门负责生成时间戳并更新状态。
• 新增监听 startTimeStamp 的 useEffect，状态变化时自动调用 loadData，无需手动触发请求。
• 初始化时先计算初始时间戳，保证第一次请求有合法参数。
• 给 loadData 添加了加载状态重置和错误处理，提升代码健壮性和用户体验。

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