ReactJS:TypeError:无法添加/删除密封数组元素

Posted

技术标签:

【中文标题】ReactJS:TypeError:无法添加/删除密封数组元素【英文标题】:ReactJS: TypeError: Cannot add/remove sealed array elements 【发布时间】: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;
                    ,
                
                )]
       
    

【问题讨论】:

【参考方案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 =&gt; post.id !== delPost.id);

【讨论】:

以上是关于ReactJS:TypeError:无法添加/删除密封数组元素的主要内容,如果未能解决你的问题,请参考以下文章

TypeError:无法在reactjs登录页面中获取

ReactJS 路由组件/渲染

ReactJS:TypeError:无法读取未定义的属性“纬度”

TypeError:无法读取reactjs中未定义的属性“长度”

ReactJS TypeError:无法读取未定义的属性(读取'main')

ReactJS TypeError:无法读取未定义的属性“setState”[重复]