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 => post.id !== delPost.id);
【讨论】:
以上是关于ReactJS:TypeError:无法添加/删除密封数组元素的主要内容,如果未能解决你的问题,请参考以下文章
ReactJS:TypeError:无法读取未定义的属性“纬度”
TypeError:无法读取reactjs中未定义的属性“长度”