React：如何在useEffect中访问并修改另一状态变量？

1. 保存原始年份范围 #

首先添加一个状态存储API返回的完整年份区间，避免后续过滤后丢失原始数据：

const [originalYearsRange, setOriginalYearsRange] = useState<{ dateFrom: number | null; dateTo: number | null }>({ 
    dateFrom: 1900, 
    dateTo: new Date().getFullYear() 
});

2. 更新数据获取逻辑 #

修改获取API数据的useEffect，把返回的年份范围存入新状态：

useEffect(() => {
    async function fetchData() {
        let yearsResult = await SearchFilterAPI.getYearsForSelections(makeId, rangeId, modelId);
        // 保存原始年份区间
        setOriginalYearsRange({
            dateFrom: yearsResult.dateFrom,
            dateTo: yearsResult.dateTo
        });
        
        let fromResults: Array<ISelectOption> = [];
        let toResults: Array<ISelectOption> = [];
        populateFromYearsResults(yearsResult.dateFrom, yearsResult.dateTo, fromResults);
        populateToYearsResults(yearsResult.dateTo, yearsResult.dateFrom, toResults);

        setFromOptions([...fromResults])
        setToOptions([...toResults])
    }
    fetchData();
}, [makeId, rangeId, modelId]);

3. 监听选中起始年份，更新结束年份选项 #

添加专门的useEffect监听selectedFromYear变化，重新生成符合要求的结束年份选项：

useEffect(() => {
    // 处理起始年份为null的情况，默认用1900
    const currentFromYear = selectedFromYear ?? 1900;
    const toResults: Array<ISelectOption> = [];
    // 基于原始结束年份和当前选中的起始年份，重新生成结束年份选项
    populateToYearsResults(originalYearsRange.dateTo, currentFromYear, toResults);
    setToOptions([...toResults]);
    
    // 若当前选中的结束年份小于新的起始年份，自动重置结束年份
    if (selectedToYear && selectedToYear < currentFromYear) {
        setSelectedToYear(currentFromYear);
        handleToChanged(currentFromYear);
    }
}, [selectedFromYear, originalYearsRange, selectedToYear, handleToChanged]);

逻辑说明 #

• 保存原始年份区间是为了每次更新结束年份选项时，都能基于完整的年份范围重新生成，不会因为多次过滤导致数据缺失。
• 监听起始年份变化时，调用populateToYearsResults生成新的结束年份列表，自动移除所有早于选中起始年份的选项。
• 额外处理了结束年份选中值不符合新范围的情况，避免用户选中无效年份。

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