javascript - JS检查对象中是否存在对象并将值添加到格式化对象

Question

我正在填写表单的字段，并且我有一个 formattedData 对象，该对象保留了原始数据对象的深层副本。在表单中，如果字段发生更改，我需要使用值对象中的属性更改格式化数据对象。

我制作了字段的模拟数据对象：

const formattedData = {
            model_type: 'Config',
            accessModel: '5732132',
            // Random fields
            advancedData: {
              isLion: {
                enabled: true,
                animalType: 'Cat',
                move: {
                  model_type: '',
                  source: '',
                  value: 'auto'
                }
              },
              isTiger: {
                enabled: true,
                animalType: 'Cat',
                move: {
                  model_type: '',
                  source: '',
                  value: 'auto'
                }
              }
            },
            data: {
              isLion: {
                enabled: true,
                animalType: 'Cat',
                id: 8,
                power: 6
              },
              isTiger: {
                enabled: true,
                animalType: 'Cat',
                id: 8,
                power: 6
              }
            }
          }

这是我表单中的对象：

const values = {
            advancedData: {
              isLion: {
                move: {
                  value: '89'
                }
              },
              isTiger: {
                move: {
                  value: '89'
                }
              }
            }
          }

我需要检查values.advancedData: isLionorisTiger是否已更改，然后将更改的值放入formattedData对象中。在我给出的示例中，用户发生了变化values.advancedData.isLion，values.advancedData.isTiger并且我需要将这些值放入其中formattedData而不更改 value 属性以外的任何内容。

此外，如果值已更改，我需要将其更改source为“手动”

标签： javascriptjsonreactjs

Answer 1

实现这一点的简单方法如下所示，假设数据结构始终相同。

// DATA
// For brevity I omitted the data body, but same as yours

const formattedData = {
    // ... rest of data body
};

const values = {
   // ... rest of data body
};


// SOLUTION - Using object spread

formattedData.advancedData.isLion = { ...formattedData.advancedData.isLion, ...values.advancedData.isLion };
formattedData.advancedData.isLion.move.model_type = 'manual';

formattedData.advancedData.isTiger = { ...formattedData.advancedData.isTiger, ...values.advancedData.isTiger };
formattedData.advancedData.isTiger.move.model_type = 'manual';