ReactJS：TypeError：无法添加/删除密封数组元素答案

【问题标题】：ReactJS: TypeError: Cannot add/remove sealed array elementsReactJS：TypeError：无法添加/删除密封数组元素
【发布时间】：2018-07-02 11:25:39
【问题描述】：

我正在尝试使用Apollo GraphQL 制作的API，并在使用subscriptions-transport-ws 库的GraphQL 订阅的帮助下实时更新react 组件。对于 delete 操作，我收到 TypeError: Cannot add/remove sealed array elements 错误。这是来自试图从订阅更新数据的反应组件的代码。

   componentWillReceiveProps(nextProps) {
        if (!this.subscription && !nextProps.data.loading) {
                let { subscribeToMore } = this.props.data
                this.subscription = [subscribeToMore(
                {
                    document: postDeleted,
                    updateQuery: (previousResult, { subscriptionData }) => {
                     const delPost = subscriptionData.data.postDeleted;
                     const mainData = previousResult.Posts;               

                     let post = mainData.find(post => post.id == delPost.id);
                     let updatedList =  mainData.splice(post, 1);
                     return updatedList;
                    },
                }
                )]
       }
    }

【问题讨论】：

标签： javascript reactjs graphql graphql-subscriptions

【解决方案1】：

mainData 很可能是“sealed”，因此您的 splice 操作会引发错误：

let updatedList =  mainData.splice(post, 1);

解决办法是复制数组（这里使用数组解构）：

let updatedList = [...mainData].splice(post, 1);

您可以像这样在 Chrome 控制台中尝试一下：

a = [1, 2, 3];
Object.seal(a);
a.splice(1)

// Uncaught TypeError: Cannot add/remove sealed array elements
//  at Array.splice (<anonymous>)
//  at <anonymous>:1:3

[...a].splice(1)

// [2, 3]

【讨论】：

splice 返回删除的元素，所以： let updatedList = [...mainData].splice(post, 1);不会给你更新的列表，而是被删除的单个元素
@Will [1,2,3].splice(1) （删除索引“1”之后的所有内容）和 [1,2,3].slice(1) （从索引 1 开始和通过序列结束返回）都返回 [2,3] 因为拼接中的 deleteCount 参数是如何工作的。

【解决方案2】：

如果你的数组已经被密封，你可以复制一份，然后像这样过滤掉你不想要的：

let updatedList = mainData.filter(post => post.id !== delPost.id);

【讨论】：