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

uqzxnwby  于 2022-11-25  发布在  React
关注(0)|答案(4)|浏览(302)

我们正在构建一个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"的怀疑主要是基于这样一个事实:在这个项目中包含这个包的时间是可疑的,而且似乎与这个错误的出现相吻合--尽管我不能绝对肯定地证明这一点。
The only additional clue I have, is that the JSON.stringify error always seems to be preceded by a list of warnings. They all read "This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the property on a released/nullified synthetic event. This is set to null. If you must keep the original synthetic event around, use event.persist() . See https://facebook.github.io/react/docs/events.html#event-pooling for more information." The list of goes as follows (always in the same order): nativeEvent, type, target, currentTarget, eventPhase, bubbles, cancelable, timeStamp, defaultPrevented, isTrusted and 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"
}
g2ieeal7

g2ieeal71#

将此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}
nkoocmlb

nkoocmlb2#

stringify不能处理引用自身或自身一部分的JSON对象。
Link
我已经为懒人做了一个简单的库,它覆盖了JSON.stringify(),允许它处理循环引用而不产生异常。它可以防止你在第三方库中修改任何与这个限制有关的东西。在你的代码引导时安装这个库。
Link 2

rkkpypqq

rkkpypqq3#

您正在为REACTNATIVE编写代码,但似乎对textInput使用了onChange而不是onChangeText,当您对文本输入的更新值感兴趣时,onChangeText是ReactNative的正确方法,

wbgh16ku

wbgh16ku4#

花了半天的时间,我发现了这个奇妙的方法,特别是对于React Naive,首先,安装json-stringify-safe,如果你是使用Typescript工作的,也安装@types/json-stringify-safe
然后我准备了这两个utils函数:

import serialize from 'json-stringify-safe';

const stringify = (any: any): string => serialize(any);

const parsify = (serializedString: string): any => eval(`(${serializedString})`);

相关问题