使用 Select 元素更改组件状态后更新 React 中的 JS 函数参数

Question

我在使用工作 js 函数“generateWeekDivs(currentMonth, currentYear)”更新日历日期时遇到问题，因为我从下拉列表中选择月份 (currentMonth) 并希望重新生成组件的视图。

目前我通过硬编码将月份和年份传递到 js 函数中，但我想让 select 元素中的 onChange() 函数的状态更改确定 js 函数何时更新为新值。但是， onChange() 函数是异步的，因此状态值在反应重新渲染之前不会更新，但我需要每次状态更新时运行我的 js 函数。由于异步性质，我不知道如何跟踪更改并将新的状态值正确传递到我的 js 函数中。

“generateWeekDivs(currentMonth, currentYear)”执行所有正确的计算并返回带有日期值的相应行 div。所以我需要做的就是弄清楚如何将参数更新与 Select 元素的 onChange() 同步，这应该可以解决问题...

我尝试了 useEffect，但这不允许我将“generateWeekDivs(currentMonth, currentYear)”函数放置在“weekHolders”div 中，然后生成许多包含正确日期值的 div 行...

然后我尝试添加一个

值并将 currentMonth 放入其中，以查看在更改“选择”选项时是否正确更改。这样，每次我更改 Select 元素的选项值时，

元素的 innerHTML 都会正确更新...但如果更新的值应该进入 JS 函数的参数，而不仅仅是进入，我不知道如何做同样的事情只需重新渲染 p 标签的值即可。

import React from 'react';
import '../Stylings/Calendar.css';
import {getYear, getMonthNum, getMonthName, generateWeekDivs, generateMonths, generateYears} from '../Calendar/DateFunctions.js';
import {useState, useEffect} from 'react';

function Calendar() {
    const [currentMonth, setCurrentMonth] = useState(getMonthNum);
    const [currentYear, setCurrentYear] = useState(getYear);
    console.log(getMonthName(getMonthNum()));

    return (
        <div className='calendarContainer'>
            <div className="titleToggle"> 
                <select 
                    className="selectMonths"
                    defaultValue={getMonthName(currentMonth)}
                    onChange={(e) => setCurrentMonth(e.target.value)}
                >
                    {generateMonths()}
                </select>
                <select 
                    className="selectYears"
                    defaultValue={currentYear}
                    // onChange={this.changeYear}
                >
                    {generateYears(currentYear)}
                </select>
            </div>

            <div className='weekHeader'>
                <h5>Mon</h5><h5>Tue</h5><h5>Wed</h5><h5>Thu</h5><h5>Fri</h5><h5>Sat</h5><h5>Sun</h5>
            </div>
            <div id="weekHolders">
                {generateWeekDivs(currentMonth, currentYear)} {/*wanting to correctly update currentMonth and currentYear everytime setCurrentMonth() changes*/}
            </div>
        </div>
    );
}

export default Calendar;