如何更新新对象到现有的对象在ReactJS?

Question

我有一个名为waA的对象，这是最后一步所需的。但是在ReactJS中，新对象不会在以前的对象中使用switch在函数中更新。

目标代码如下:

waA = {
jsonObject: {
wAConfigur: {}
}
}
var updatewaA = waA.jsonObject.wAConfigur;

按钮具有onClick事件，功能为:

function next(){
switch(case){
case 1:
const bD = {
'name': 'john',
'title': 'Boy',
}
updatewaA.configureSet = bD;
break;
case 1:
const cE = {
'age': 34,
}
updatewaA.newDate = bD;
break;

}
}

最后需要的Object是:

{
jsonObject: {
wAConfigur: {
configureSet: {
'name': 'john',
'title': 'Boy',
},
newDate: { 
'age': 34
}
}
}
}

但是由于某些原因，在ReactJS对象没有得到更新。

我怎么能做到呢?谢谢你。

Answer 1

您需要将对象存储在react状态中，以便稍后更新并将新状态呈现给dom。

import {useState} from "react"
// new state waA and updater function setWaA
const [waA, setWaA] = useState({
jsonObject: {
wAConfigur: {},
},
})
function next(number){
switch(number){
case 1:
const bD = {
'name': 'john',
'title': 'Boy',
}

// here we added configureSet
setWaA(prevWaA => {
...prevWaA,
jsonObject: {
...prevWaA.jsonObject,
configureSet = bD
}
})
const cE = {
'age': 34,
}

// here we added newDate
setWaA(prevWaA => {
...prevWaA,
jsonObject: {
...prevWaA.jsonObject,
newDate = cE
}
})
break;
}
}

Answer 2

继续Abhishek给出的答案，在ReactJS中，你应该注意以函数的方式使用对象和数组，让它们在整个应用范围内保持常量，这样你就不会在使用过程中改变你的变量。

这确保了变量使用的每一步都是"new"不变，而是从前一个值克隆而不实际改变前一个值。这也是最好的，因为对象和数组是内存中的引用，而不是实际值，因此，如果你分配一个对象或数组，你实际上是分配引用，而不是它的值。

在React中，你可以扩展对象或数组来克隆它，但要照顾对象，因为它不是Lodash那样的深度克隆，所以你必须按照Abhiskek指定的去做。

import { useState } from 'react'
function Task() {
const [config, setConfig] = useState(initialObjectConfig)
useEffect(() => {
setConfig(prevWaA => {
...prevWaA,
jsonObject: {
...prevWaA.jsonObject,
newDate = cE
}
})
}, [])
}

你可以把同样的想法应用到Switch语句中，但是如果你不想保持状态不变性，你可以看看immerj .js，它是一个可以帮助你实现你正在寻找的东西的库。