与对象和嵌套数组进行反应状态比较

Question

我正在尝试将状态与同一对象(useRef(的先前版本进行比较以检测更改。

使用useEffect加载到状态的对象如下所示：

{
active: true,
design: [
{
existing: '55Xgm53McFg1Bzr3qZha',
id: '38fca',
options: ['John Smith', 'Jane Doe'],
required: true,
title: 'Select your name',
type: 'Selection List'
},
{
existing: '55Xgm53McFg1Bzr3qZha',
id: '38fca',
options: ['John Smith', 'Jane Doe'],
required: true,
title: 'Select your name',
type: 'Selection List'
},
],
icon: '🚜',
id: '92yIIZxdFYoWk3FMM0vI',
projects: false,
status: true,
title: 'Prestarts'
}

这就是我加载我的应用程序对象并定义比较器状态(previousApp(以比较它并检测更改(使用 lodash(的方式，这一切都很好用，直到我更改设计数组中的值。

const [app, setApp] = useState(null)
const [edited, setEdited] = useState(false)
const previousApp = useRef(null)
useEffect(() => {
if (app === null) {
getApp(someAppId).then(setApp).catch(window.alert)
}
if (previousApp.current === null && app) {
previousApp.current = { ...app }
}
if (previousApp.current && app) {
_.isEqual(app, previousApp.current) ? setEdited(false) : setEdited(true)
}
}, [app])

例如，我使用以下代码更改 app.design[0].title = 'testing' 的输入值：

const updateItem = e => {
let newApp = { ...app }
let { name, value } = e.target
newApp.design[0][name] = value
setApp(newApp)
}

从某种意义上说，它更新了我的应用程序状态对象，但不能检测到与以前的App.current相比的任何更改

当我在更改两个值后控制台日志应用程序和上一个应用程序时，它们是相同的。出于某种原因，它似乎也更新了我以前的应用程序值。

---

重新排列设计数组按预期工作，并使用以下函数检测更改：

const updateDesign = e => {
let newApp = { ...app }
newApp.design = e
setApp(newApp)
}

Answer 1

它可能没有检测到任何差异，因为design属性中存在的数组保持相同的引用。

执行此操作时：

let newApp = { ...app }

你正在为应用创建一个新对象，但该对象的属性值将保持不变，因为它是浅拷贝。因此，design数组(它是一个对象，因此由引用处理(将保持其值(引用(不变。

我认为这也将解决您的问题：

const updateItem = e => {
let newApp = { ...app };
let newDesign = Array.from(app.design);  // THIS CREATES A NEW ARRAY REFERENCE FOR THE 'design' PROPERTY
let { name, value } = e.target;
newDesign[0][name] = value;
setApp({
...newApp,
design: newDesign
});
}

Answer 2

我发现使用 lodash 的克隆深度函数，我能够删除 previousApp 和 App 之间发生的奇怪链接;即使我使用了{...app}

请参阅以下内容：

if (previousApp.current === null && app) {
previousApp.current = cloneDeep(app)
}