Impossible d'ajouter l'identité de la propriété : l'objet ne peut pas être étendu

Question

J'ai rencontré une simple TypeError en essayant de préparer le corps de ma requête POST.

Voici ma fonction 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')));
  };

J'ai vu de nombreuses questions similaires mais je n'ai pas trouvé la bonne réponse. As tu des idées? Merci

Answer 1

Peut-être devriez-vous déclarer l'objet PrepareBody différemment ?

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

}

Et n'oubliez pas de vérifier les propriétés de l'objet :

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

Ou recourir à la déstructuration :

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

} = valeurs || {};

Answer 2

Lorsque vous partez de formik 库中获取的表单值是 不可扩展的。当你执行 const prepareBody = { ...values.customerCase};, vous créez un objet qui contient une copie de toutes les valeurs originales, mais des références à des valeurs non primitives (comme les objets) sont ajoutées, c'est pourquoi vous ne pouvez pas l'étendre.

Pour pouvoir le modifier, vous devez créer une copie complète de values.customerCase. Désormais, le standard Javascript fournit la méthode structuredClone pour vous aider à y parvenir.