無法新增屬性identity：該物件無法擴充

Question

當我嘗試準備我的POST請求體時，我遇到了一個簡單的TypeError。

這是我的handleSubmit函數：

const handleSubmit = (values: any, formikHelpers: FormikHelpers<any>) => {
    const prepareBody = { ...values.customerCase};
    if (type === '1') {
      console.log(prepareBody);
      prepareBody.case.identity= {}; // 即使我删除这一行也会出错
      prepareBody.case.identity.title =
        values.customerCase.customer.contact.title;
      prepareBody.case.identity.firstName =
        values.customerCase.customer.contact.firstName;
      prepareBody.case.identity.lastName =
        values.customerCase.customer.contact.lastName ;
      prepareBody.case.type = type;
    }
    PostCustomer({
      reference: props.reference,
      body: prepareBody,
    })
      .unwrap()
      .then(() => {
        formikHelpers.resetForm();
        history.push('/success');
      })
      .catch(() => alertToasts('error', t('toast.error')));
  };

我看到了許多類似的問題，但沒有找到正確的答案。 你有什麼想法嗎？ 謝謝

Answer 1

也許你應該以不同的方式宣告prepareBody物件？

const prepareBody ={
case: {
    identity: {
        title: null,
        firstName: null,
        lastName: null
    },
    type: null
},
...values.customerCase

}

並且不要忘記檢查物件中的屬性：

values?.customerCase?.customer?.contact?.title

或使用解構：

const {
customerCase: {
    customer: {
        contact: {
            title,
            firstName,
            lastName
        }
    }
}

} = values || {};

Answer 2

你從 formik 函式庫中取得的表單值是 不可擴充的。當你執行const prepareBody = { ...values.customerCase}; 時，你建立了一個對象，其中包含所有原始值 的副本，但是對於非原始值（例如物件）的引用被添加進去了，這就是為什麼你無法擴展它的原因。

要能夠修改它，你需要建立一個 深拷貝 的 values.customerCase。現在，Javascript 標準提供了 structuredClone 方法來幫助你實現這一點。