Mutation前循环移除__typename字段失败，报错TypeError如何解决？

尝试在执行更新Mutation前移除values变量里的__typename字段，用代码values.profiles.forEach(i => delete i["__typename"])时触发报错：TypeError: Cannot delete property '__typename' of #<Object>，但手动创建结构完全一致的obj对象时，相同代码却能成功删除。完整代码如下：

<Formik
    initialValues={initialValues}
    onSubmit={async (values, { setSubmitting }) => {

        try {
            setSubmitting(true);

            const obj = {
                "profiles": [
                    {
                        "__typename": "Account",
                        "firstName": "John1",
                        "lastName": "Doe1",
                    },
                    {
                        "__typename": "Account",
                        "firstName": "John2",
                        "lastName": "Doe2",
                    }
                ],
            }

            obj.profiles.forEach(i => delete i["__typename"]);
            console.log(obj);

            values.profiles.forEach(i => delete i["__typename"]);
            console.log(values);

            ...
        } catch (e) {
            console.log(e)
        }
    }}
/>

原因 #

Formik传递给onSubmit的values对象是**被冻结（Object.freeze）**的，或者对象中的属性被设置为configurable: false，这意味着你无法直接删除或修改这些属性的配置，delete操作自然会失败。而你手动创建的obj是普通JavaScript对象，属性默认是可配置的，所以delete能正常执行。

解决方法 #

方法1：深拷贝values后操作 #

先对values进行深拷贝，得到一个可修改的普通对象，再删除__typename：

// 用JSON序列化/反序列化实现深拷贝（注意：会丢失函数、undefined等特殊值）
const mutableValues = JSON.parse(JSON.stringify(values));
mutableValues.profiles.forEach(i => delete i["__typename"]);

// 如果需要保留特殊值，用lodash的cloneDeep
// import cloneDeep from 'lodash/cloneDeep';
// const mutableValues = cloneDeep(values);

方法2：创建新对象排除__typename #

用对象解构配合map生成新的数组，避免直接修改原对象：

// 生成移除__typename后的新profiles数组
const cleanedProfiles = values.profiles.map(profile => {
  const { __typename, ...rest } = profile;
  return rest;
});
// 构建新的values对象
const cleanedValues = { ...values, profiles: cleanedProfiles };

这样处理后，你就可以用mutableValues或cleanedValues来执行后续的Mutation操作了。

内容的提问来源于stack exchange，提问作者User