reactjs - 如何使用 useEffrect 函数获取最新值？

Question

这是我的代码：

export default function RosterSchedulerTable(props){
    const [rosterData,setRosterData]=useState(JSON.parse(sessionStorage.getItem("rosterData")));
    const [monthlyCalendar,setMonthlyCalendar]=useState(props.rosterSchedulerData.monthlyCalendar);
    const [selectedRegion,setSelectedRegion]=useState(new SelectedRegion());
    
    let mouseUp=useCallback(()=>{
        console.log("mouse up");
        //console.log(selectedRegion.inSelectMode);
        SelectedRegionUtil.endSelect(selectedRegion,setSelectedRegion);       
    },[selectedRegion]);
    
    useEffect(()=>{
        setMonthlyCalendar(props.rosterSchedulerData.monthlyCalendar);
        setRosterData(JSON.parse(sessionStorage.getItem("rosterData")));
 
        document.addEventListener('mouseup',mouseUp);
        return () => {
            document.removeEventListener('mouseup', mouseUp)
        }
    },[mouseUp,props.rosterSchedulerData.monthlyCalendar]);
    
    let temp={...props.rosterSchedulerData};
    delete temp.monthlyCalendar;
    
    console.log(monthlyCalendar.calendarDateList.length);
    console.log(Object.keys(rosterData.rosterList['ITO1_1999-01-01'].shiftList).length);
    
    return (
        <table id="rosterTable">
            
        </table>
    )
}

props.rosterSchedulerData.monthlyCalendarsessionStorage.getItem("rosterData")' and 都由父组件提供。

问题是父组件更新参数时，会执行两次以下语句。

console.log(monthlyCalendar.calendarDateList.length);
console.log(Object.keys(rosterData.rosterList[**staffId**].shiftList).length);

并且第一次执行的结果总是返回旧值。

仅在第二次执行期间才会显示最新值。

这是一种可能的解决方法吗？因此，最新值将在第一次执行中显示。

非常感谢您

标签： reactjsuse-effect