如何将新的object更新为ReactJS中已有的object？

Question

我有一个名为waA的 object，这是最后一步所必需的。 但是在 ReactJS 中，新的 object 没有在之前的 object 中使用 function 中的switch进行更新。

object代码如下：

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

该按钮有onClick事件，其 function 是：

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 中的 object 没有得到更新。

我怎样才能做到？ 谢谢你。

Answer 1

您需要将 object 存储在 react state 中，以便稍后更新并将新的 state 呈现给 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 中，您应该注意以功能方式使用对象和 arrays，使它们在整个应用程序 scope 中保持常量，这样您就不会在使用过程中更改变量。

这确保了使用变量的每个步骤都是“新的”和未更改的，而是从以前的值克隆而没有实际更改以前的值。 这也是最好的，因为对象和 arrays 是 memory 中的引用并且不是实际值，因此如果您分配 object 或数组，您实际上是在分配引用，而不是它的值。

使用 React，您可以传播 object 或数组来克隆它，但要注意 object，因为它不是像 Lodash 那样的深度克隆，所以您必须按照 Abhiskek 的指定进行操作。

import { useState } from 'react'

function Task() {
  const [config, setConfig] = useState(initialObjectConfig)

  useEffect(() => {
    setConfig(prevWaA => {
            ...prevWaA,
            jsonObject: {
              ...prevWaA.jsonObject,
              newDate = cE
            }
          })
  }, [])
}

您可以将相同的想法应用于 Switch 语句，但如果您不想保持 state 不变性，您可以查看immer.js ，这是一个可以帮助您准确实现所需内容的库。