反应中 JSON 的循环结构

Question

我在组件的 state 上有这个变量：

chartData: {
            labels:null,
            datasets:null
        }

我从我的 api 收到这个 json 来创建图表：

{
"labels": [
    "13/7",
    "14/7",
    "15/7"
],
"datasets": [
    {
        "label": "%%%%",
        "data": [
            0,
            18,
            168
        ],
        "backgroundColor": [
            "rgba(255, 99, 132, 0.6)",
            "rgba(255, 99, 132, 0.6)",
            "rgba(255, 99, 132, 0.6)"
        ]
    }
]

}

图表显示没有问题，但是当我尝试打印 this.state.chartData 的值时，会出现：

TypeError：将循环结构转换为 JSON --> 从 object 开始，使用构造函数 'HTMLCanvasElement' | 属性 '__reactInternalInstance$khbtn4bp50s' -> object 和构造函数 'FiberNode' --- 属性 'stateNode' 关闭了圆圈

这是变量的 setState：

this.setState({
        chartData: {

            datasets: response.datasets,
            labels:response.labels
        }
    })

响应是上面的 json。

仅打印值的更新方法：

 teste=()=>{

    alert("chart data")

    alert(JSON.stringify(this.state.chartData))

}

edit1：console.log 的打印（this.state.chartData）

编辑 2： api 调用：

    return fetch(url, {

        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
            'Access-Control-Allow-Origin': '*'
        },
        body: JSON.stringify({
            labels:params.labels,
            datasets:params.datasets
        })

    }).then(response => response.json())
        .then(json => {
            console.log("fetchJsonFromApi " + JSON.stringify(json))
            // making callback optional
            if (callback && typeof callback === "function") {
                callback(json);
            }
            return json;
        })
        .catch(error => {
            console.log(error)
        });

}

Answer 1

这里发生的是JSON.stringify不能用于循环数据。 循环数据是当您有一个引用其他父对象的对象时。 如果JSON.stringify打印一些循环数据，它将是一个无穷大的字符串。

这可能是因为您从响应中获得了一些循环数据。

如果你真的想打印它并忽略那个循环，你可以看看这个有很多方法的问题。

我推荐的是使用console.log而不是alert并且在控制台中您将能够毫无问题地看到循环数据。

这是一个显示循环数据的演示，取自this answer 。

 // Demo: Circular reference var o = {}; oo = o; // Note: cache should not be re-used by repeated calls to JSON.stringify. var cache = []; JSON.stringify(o, function(key, value) { if (typeof value === 'object' && value !== null) { if (cache.indexOf(value) !== -1) { // Duplicate reference found, discard key return; } // Store value in our collection cache.push(value); } return value; }); cache = null; // Enable garbage collection var a = {b:1} var o = {}; o.one = a; o.two = a; // one and two point to the same object, but two is discarded: console.log(JSON.stringify(o))

要删除_meta （可能有循环数据），您可以执行以下操作：

if(Array.isArray(response.datasets){
    let newDataSets = response.datasets.map(({label, data, backgroundColor}) => ({label, data, backgroundColor}))
    // do what you want to do
}

Answer 2

这可能对某人有所帮助，我遇到了同样的问题并通过评论我添加的代码来解决它。 问题的发生是因为 function 被调用了两次。

before:
    afunctionCall()
    return;
    aFunctionCall()
after:
    afunctionCall()
    // return;
    // aFunctionCall()

Answer 3

如果您在使用 joi-browser npm package 时在本地运行您的 react 应用程序时遇到此问题。 如果它以前工作并且它不再工作

当我更改链接到我的表单的 object 变量的内容时，我遇到了同样的错误。

请关闭应用程序然后重新启动它

yarn start
npm start