对象序列化

发表于

之前遇到一个问题

1
DataCloneError:Failed to execute 'pushState' on History: Symbol(xxx) could not be cloned

首先我们复现一下问题。

我们有两个页面A和B。在A页面我们要跳转B页面的同时，向B页面中传递一些参数，这里我们直接使用了react-router的history.push的方法。举个例子

1
2
3
4
this.props.history.push({
  pathname: '/other',
  state: {a: text}
})

/other为我们B页面的路由，通过state向其传递数据。主要的数据是text，关键就在于我们的text的内容格式。如果text是数值或者字符串还好，一切正常。但如果我的text如下

1
const text = Symbol('xxx')

我们在A页面触发页面跳转时，便会报出最开始的那个报错了。

通过报错我们可以看到，是我们传了Symbol类型数据导致的报错。

React router的history是建立在history对象上的。我们看看官网的描述吧

The state object can be anything that can be serialized.

我们传递的state必须是可以序列化的数据。

如果之前看一些关于深浅拷贝的知识时，应该有注意到，在使用JSON.parse(JSON.stringify())的方式实现深拷贝时，都会指出它的一个缺点就是undefined、函数、和Symbol值在这个转换过程中会丢失，也就是说，这些数据是不支持序列化的。所以如果我们把刚才那个例子的text改为

1
const text = function(){}

果然报错了

1
DataCloneError: Failed to execute 'pushState' on 'History': function () {} could not be cloned.

但是我改为undefined则正常运行，有点奇怪。这可能是更细节的问题，先不深究了。