无法在不出现只读错误的情况下访问深层嵌套对象属性

Question

每次我尝试访问深层属性（我猜测数组中的一个项目是通过它的索引）我得到以下错误：

ERROR TypeError: Cannot assign to read only property 'value' of object '[object Object]'

在下面找到我试图获取的代码运行，但会抛出上面的错误：

@Input() data: CivilLiabilityQuestionnaireModel;
public questions: CivilLiabilityQuestionnaireModel;

this.questions = { ...this.data };

const questionGroupIndex = 0;
const questionGroupItemIndex = 0;

this.questions
    .questionGroup[questionGroupIndex]
    .questionGroupItems[questionGroupItemIndex]
    .answers[0]
    .value = form[val];

关于可能性的更多细节：

// This works
this.questions.id = 'hotdog';

// This doesn't work
// ERROR TypeError: Cannot assign to read only property 'id' of object '[object Object]'
this.questions.questionGroup[questionGroupIndex].id = 'hamburger';

我原以为只有使用展开运算符才能做到这一点，但这会将我所有的数组变成对象，而我需要不惜一切代价保留我的数组。

这里是我试过的传播方案：

this.questions = {
  ...this.questions,
  questionGroup: {
    ...this.questions.questionGroup,
    [questionGroupIndex]: {
      ...this.questions.questionGroup[questionGroupIndex],
      questionGroupItems: {
        ...this.questions.questionGroup[questionGroupIndex].questionGroupItems,
        [questionGroupItemIndex]: {
          ...this.questions.questionGroup[questionGroupIndex].questionGroupItems[questionGroupItemIndex],
          answers: {
            ...this.questions.questionGroup[questionGroupIndex].questionGroupItems[questionGroupItemIndex].answers,
            [0]: {
              ...this.questions.questionGroup[questionGroupIndex].questionGroupItems[questionGroupItemIndex].answers[0],
              value: form[val]
            }
          }
        }
      }
    }
  }
};

Answer 1

也许您在某处将某些内容定义为 constant 并且您正在尝试更改它。 Javascript 自然不支持只读道具所以基本上在实践中出现此错误的唯一原因是您将某些 variable/prop 定义为 constant 或者您将 obj 的道具定义为 writable=false 并且您正在尝试更改它。查找 questionGroupIndex 或 questionGroupItemIndex，您可能正在尝试更改它们。无论哪种方式，问题都不在嵌套中。

Answer 2

我设法找到了问题的解决方案。在原始问题的示例中，我执行了以下操作：

this.questions = { ...this.data };

解决方案来自另一个post：

上面示例的问题是您只克隆了根属性，而嵌套的子属性保持冻结状态。

由于我的值来自NGRX商店，所以基本处于"freeze"状态，无法调整。

要解决此问题，您可以使用 lodash 中的 cloneDeep() 来确保嵌套属性也被克隆并丢失 "freeze" 状态。

this.questions = _.cloneDeep(this.data);

无法在不出现只读错误的情况下访问深层嵌套对象属性

Can't access deep nested object property without getting a readonly error

javascript

spread

无法在不出现只读错误的情况下访问深层嵌套对象 属性

Can't access deep nested object property without getting a readonly error

javascript

spread

无法在不出现只读错误的情况下访问深层嵌套对象属性