React中用一个状态变量初始化另一个时出现undefined问题

useState的初始值只会在组件第一次渲染时计算一次，后续状态更新不会重新触发初始值的计算。

你的代码里：

• minSearchDate初始值是空字符串""
• 异步获取最小日期的逻辑放在了useEffect里（组件挂载后才执行），所以第一次渲染时，用minSearchDate初始化searchDateFrom的时候，它还是空字符串，触发了undefined的分支。
• 哪怕之后minSearchDate通过异步请求更新了，searchDateFrom的初始值也不会重新计算，所以一直是undefined。

可以通过监听minSearchDate的变化，在它更新后再设置searchDateFrom，同时保留dateFromQueryString的优先级：

const [minSearchDate, setMinSearchDate] = useState<string>("");
// 先优先用query参数初始化，没有的话先设为undefined
const [searchDateFrom, setSearchDateFrom] = useState<Date | undefined>(
    dateFromQueryString ? new Date(JSON.parse(dateFromQueryString)) : undefined
);

useEffect(() => {
    getMinSearchDate();
}, []);

// 监听minSearchDate和dateFromQueryString的变化，更新searchDateFrom
useEffect(() => {
    // 如果没有query参数，且minSearchDate有值了，就更新searchDateFrom
    if (!dateFromQueryString && minSearchDate) {
        setSearchDateFrom(new Date(JSON.parse(minSearchDate)));
    }
}, [minSearchDate, dateFromQueryString]);

const getMinSearchDate = async () => {
    setIsLoading(true);
    if (doGetMinSearchDate) {
        try {
            const { minDate } = await doGetMinSearchDate();
            setIsLoading(false);
            setMinSearchDate(minDate);
        } catch (error) {
            setIsLoading(false);
            console.error("获取最小搜索日期失败:", error);
        }
    }
};

另外提个小优化：原代码里async函数混用了await和.then()，改成try/catch的写法更清晰，也方便处理错误。

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