React Native JSON.stringify 无法序列化循环结构答案

【问题标题】：React Native JSON.stringify cannot serialize cyclical structuresReact Native JSON.stringify 无法序列化循环结构
【发布时间】：2017-07-05 02:56:04
【问题描述】：

我们正在构建一个 RN 应用 (RN0.37)，我们遇到了一个问题，即当应用运行时，我们会收到“TypeError: JSON.stringify cannot serialize cyclic structures”。

API 响应没有任何相关性发生变化，问题最近消失了，但在擦除/重建时再次出现（由不相关的问题触发）。

我怀疑使用了几个包：“react-native-router-flux”和“react-native-permissions”，但我无法在应用程序中找到任何相关内容。

目前我对“react-native-router-flux”的怀疑主要基于这篇文章：https://github.com/aksonov/react-native-router-flux/issues/363

我对“react-native-permissions”的怀疑主要是基于这样一个事实，即在这个项目中包含这个包的时间是可疑的，并且似乎与这个错误的出现相吻合——尽管我不能t 绝对肯定地证明这一点。

我拥有的唯一额外线索是 JSON.stringify 错误似乎总是以警告列表开头。他们都读到“出于性能原因重用此合成事件。如果您看到此内容，则表示您正在访问已发布/无效合成事件的属性。此设置为 null。如果您必须保留原始合成事件，使用event.persist()。有关更多信息，请参阅https://facebook.github.io/react/docs/events.html#event-pooling。”列表如下（始终按相同顺序）：nativeEvent、type、target、currentTarget、eventPhase、bubbles、cancelable、timeStamp、defaultPrevented、isTrusted 和 touchHistory。

以下是我的package.json：

"dependencies": {
  "blueimp-md5": "2.5.0",
  "moment": "2.16.0",
  "phone-formatter": "0.0.2",
  "react": "15.3.2",
  "react-native": "0.37.0",
  "react-native-asset-library-to-base64": "1.0.1",
  "react-native-aws3": "0.0.3",
  "react-native-button": "1.7.1",
  "react-native-cached-image": "1.2.2",
  "react-native-camera-kit": "4.0.1",
  "react-native-camera-roll-picker": "1.1.9",
  "react-native-contacts": "0.5.2",
  "react-native-fbsdk": "0.4.0",
  "react-native-fetch-blob": "0.10.0",
  "react-native-fs": "2.0.1-rc.2",
  "react-native-geocoder": "0.4.5",
  "react-native-image-crop-picker": "0.10.5",
  "react-native-image-resizer": "0.0.12",
  "react-native-nav": "1.1.4",
  "react-native-permissions": "0.2.5",
  "react-native-photo-view": "1.2.0",
  "react-native-router-flux": "3.37.0",
  "react-native-stripe": "1.2.1",
  "react-native-swipe-list-view": "0.3.1",
  "react-redux": "4.4.6",
  "redux": "3.6.0",
  "redux-storage": "4.1.1",
  "redux-storage-engine-reactnativeasyncstorage": "1.0.2",
  "underscore": "1.8.3"
}

【问题讨论】：

您是否将一个循环对象记录到控制台，然后先将其序列化？
我们发现问题一直存在，其间断的原因与模拟器上启用了Javascript调试有关。仍然不确定问题是什么。

标签： ios json react-native react-native-router-flux cyclic

【解决方案1】：

将此getCircularReplacer 函数作为第二个参数传递给JSON.stringify() 将修复此错误：

const getCircularReplacer = () => {
    const seen = new WeakSet();
    return (key, value) => {
    if (typeof value === "object" && value !== null) {
        if (seen.has(value)) {
            return;
        }
        seen.add(value);
    }
    return value;
    };
};

然后你可以按如下方式使用它：

JSON.stringify(circularReference, getCircularReplacer());
// {"otherData":123}

【讨论】：

【解决方案2】：

JSON.stringify 无法处理引用自身或自身部分的 JSON 对象。

Link

我为懒人创建了一个简单的库，它覆盖 JSON.stringify() 以允许它处理循环引用而不产生异常。它使您无法更改 3rd 方库中有关此限制的任何内容。在代码的引导程序中安装它。

Link 2

【讨论】：

【解决方案3】：

您正在为 REACT NATIVE 写作，但您似乎在 textInput 上使用了 onChange 而不是 onChangeText，当您对文本输入的更新值感兴趣时，这是 React Native 的正确方法，

【讨论】：

onChange 在 REACT NATIVE 上使用时会返回 { nativeEvent: { eventCount, target, text} } 这就是 JSON.stringify() 抱怨其循环的原因