Javascript 在现有 object 中添加 object

Question

我希望用户可以选择添加更多 stepTypes、stepCodes 和属性。 他可以使用现有的 StepType 或不同的 stepType 添加 stepCode，因此，object 会与此类似：

你看？ 在名为“guide”的 stepType 中，我有 2 个 stepCode（G019、G040）。 在名为“成功”的 stepType 中，我只有一个 (S003)，依此类推。 由于我是 js 的新手，甚至是对象的新手，我希望你们帮助我创建一个 function 来检查 stepType 是否已经存在，然后向它添加另一个 stepCode（及其属性）。 而且，如果它还不存在，我希望这个 function 使用 stepCode 及其属性创建这个新的 stepType。

目前，我的代码如下所示：

 const checkStep = () => {
    if (!Object.keys(procedures).length) {
      let proc = 
        {[key]:
          {
            [stepType]: {
              [stepCode]: {
                [language]: stepText,
                timeout,
                nextInstruction,
              }
            }
          }
        }
      setProcedures(proc)
    }
    else{
      Object.entries(procedures).forEach((p, k) =>{
        ...
      })
    }
  }

每次用户单击“添加另一个步骤”按钮时，我都会将此称为 function。 第一部分检查 object 是否已经存在，如果不存在，则使用其密钥创建 object 等等（这部分正在工作）。 我不知道该怎么做的是 ELSE 部分。 我想我们必须检查在object调用程序中是否已经存在stepType，但我不知道该怎么做。 我也不知道如何将 stepCode 和属性放在现有对象（过程）中。 也许我创建了一个变量并喜欢：setProcedures (...procedures, variable)。 我不想丢失程序中的内容，只是按照我向您解释的方式添加更多内容。

PS：所有的变量（stepType、stepCode、language、stepText、timeout、nextInstruction）都是一个useState。 当用户在输入文本字段中写入任何内容时，我使用 e.target.value 设置特定变量。

谢谢你。

Answer 1

您可以对每个键执行循环，如果匹配，则添加到现有数据或创建新的 stepType 并添加。

var newStepType = "test", stepCode="test1", language ="en", stepText="hello", timeout=9, nextInstruction="new ins";
    Object.keys(procedure.DOF0014).forEach(key => { 
//if newStepType matches insert stepCode. eg: stepType is "guide"
        if(key === newStepType) { 
            procedure.DOF0014[key] = { ...procedure.DOF0014[key], ...{[stepCode]: {[language]: stepText,timeout,nextInstruction}}}
        }else{
            procedure.DOF0014 = {...procedure.DOF0014, ...{[newStepType]:{[stepCode]: {[language]: stepText,timeout,nextInstruction}}}};
        }
    });

尝试这个。 我没有测试代码。 但希望它有效。 我正在分享如何做的想法。

Object.keys(procedure).forEach(codes => {
  Object.keys(procedure[codes]).forEach(key => { 
            if(key === newStepType) { 
                procedure[codes][key] = { ...procedure[codes][key], ...{[stepCode]: {[language]: stepText,timeout,nextInstruction}}}
            }else{
                procedure[codes] = {...procedure[codes], ...{[newStepType]:{[stepCode]: {[language]: stepText,timeout,nextInstruction}}}};
            }
        });    
  })