如何在 React State 中保留数组修改的历史记录？

Question

我在尝试保存状态的更新和修改历史时遇到了一些问题。我有一个对象“旅程”，其中包含一个研讨会列表（另一个数组）。当我更新我的研讨会列表时，我想创建另一个包含修改的数组，同时我想保留以前的数组，这样我总能看到我的研讨会列表的不同版本。

let idToRemove = event.currentTarget.id;
    let tempJourney = [...journey];
    for (let i = 0; i < tempJourney.length; i++) {
        for (let j = 0; j < tempJourney[i].workshops.length; j++) {
            if (tempJourney[i]?.workshops[j]?.id == parseInt(idToRemove)) {
                tempJourney[i].workshops.splice(j, 1);
                break;
            }
        }
    }

    setHasModification( true );
    setLastJourney(journey); // Historical version
    setJourney(tempJourney); // New version
}

enter image description here

Answer 1

当你传播旅程时，对象仍然引用原始对象。

试试这个：

let tempJourney = JSON.parse(JSON.stringify(journey));

如何在 React State 中保留数组修改的历史记录？

How to keep the history of modications of an array in React State?

state

typescript

reactjs

next.js

react-hooks