DataCloneError：无法克隆对象。 [火狐浏览器]答案

【问题标题】：DataCloneError: The object could not be cloned. [Firefox Browser]DataCloneError：无法克隆对象。 [火狐浏览器]
【发布时间】：2021-07-21 10:29:54
【问题描述】：

尝试将数据作为对象传输到另一个页面时遇到 DataClone 错误

在 Crome 浏览器上出现以下错误：

DataCloneError: 无法在“历史”上执行“pushState”：无法克隆函数 () { [本机代码] }。

app.js

const app = () => {
  const profile = useContext(ProfileContext);
  console.log(typeof profile) // object type
  
  const gotoEditPage = () => {
   history.push({
     pathname: '/setting',
     state: {profile}
   })
  }
 return (
  <>
   <button onClick={gotoEditPage}>Next</button>
  </>
 )
}

是否是浏览器特定的错误。

【问题讨论】：

标签： reactjs object react-hooks

【解决方案1】：

DataCloneError 实际上发生是因为我试图在对象中传输方法。因此，为避免此错误，只需将 Object 解析为 JSON，如下所示

const parseData = JSON.parse(JSON.stringify(profile));

现在 parseData 可以很容易地转移到另一个页面。

【讨论】：