Why the undo variable not updated?

  javascript, reactjs

Here is my code:

import useUndo from 'use-undo';
export default function UndoTable(props){
    const [hightLightCellIndex, setHightLightCellIndex] = useState(-1);
    let [
        rosterList,
        undoUtil
    ]=useUndo(props.rosterTableData.rosterList);
    
    
    let activeShiftInfoList=props.rosterTableData.shiftInfoList;
    let calendarUtility=props.rosterTableData.calendarUtility;
    let monthlyCalendar=props.rosterTableData.monthlyCalendar;
    let contextValue={
        activeShiftInfoList,
        calendarUtility,
        hightLightCellIndex,
        monthlyCalendar,
        rosterList,
        setHightLightCellIndex,
        undoUtil
    };    
    console.log(Object.keys(props.rosterTableData.rosterList["ITO1_1999-01-01"].shiftList).length);
    console.log(Object.keys(rosterList.present["ITO1_1999-01-01"].shiftList).length);
    //console.log(contextValue);
    return (
        <table>              
        </table>
    )
}

I am using use-undo package to implement the undo feature.

I use the useUndo hook to convert the parent provided data (i.e. props.rosterTableData.rosterList) into the undo variable rosterList.

The Problem:

I found that the content of rosterList does not update when the content of props.rosterTableData.rosterList is updated.

What I have tried:

I have tried to modify the code to the following:

import useUndo from 'use-undo';
export default function UndoTable(props){
    const [hightLightCellIndex, setHightLightCellIndex] = useState(-1);
    let [
        rosterList,
        undoUtil
    ]=useUndo(props.rosterTableData.rosterList);
    
    
    useEffect(()=>{
        console.log(Object.keys(props.rosterTableData.rosterList["ITO1_1999-01-01"].shiftList).length);
        console.log(Object.keys(rosterList.present["ITO1_1999-01-01"].shiftList).length);
    },[props.rosterTableData])
    //console.log(contextValue);
    
    return (
        <table>              
        </table>
    )
}

Unfortunately, the problem still exists.
Is there any way to fix the problem?

Source: Ask Javascript Questions

LEAVE A COMMENT