我正在try 使用dotNetHelper将图表中的所有系列从JS传递到CS. 但在此行中出现错误("window.dotNetHelper.invokeMethodAsync(‘Items’,allSeries)".我try 了其他堆栈溢出答案中建议的不同方法,但无法使其正常工作.将非常感谢您的意见.

错误:

blazor.webassembly.js:1 Uncaught (in promise) Type错误: Converting circular structure to JSON
--> starting at object with constructor 'u'
|     property 'alignedObjects' -> object with constructor 'Array'
|     index 0 -> object with constructor 'z'
--- property 'renderer' closes the circle
at JSON.stringify (<anonymous>)
at k (blazor.webassembly.js:1:5176)
at b (blazor.webassembly.js:1:1989)
at A.invokeMethodAsync (blazor.webassembly.js:1:3866)
at v.itemEvent (JSInterop.min.js:269:23)
at highstock.js:17:483
at Array.forEach (<anonymous>)
at f (highstock.js:17:461)
at v.firePointEvent (highstock.js:270:1)
at C.runPointActions (highstock.js:307:340)

Jsteredop.js:

function itemEvent() {     
    const allSeries = this.series.chart.series;
    //const convert = JSON.parse(JSON.stringify(allSeries))
    window.dotNetHelper.invokeMethodAsync('Items', allSeries); // Error in this line
}

加入时间:清华2007年01月25日下午3:33

  [JSInvokable]
    public void Items(List<Items> allseries)
    {
        Console.WriteLine("Enter");// does not enter here
        foreach (var eachItem in allseries)
        {
            Console.WriteLine("eachItem {0}", eachItem);
        }
    }

推荐答案

当您调用dotNetHelper.invokeMethodAsync时,它隐式调用JSON.stringify(),而当您传递的对象具有循环引用时,它无法被解析,因此您会得到TypeError: Converting circular structure to JSON错误.

例如,在这里,对象使用关键字.self引用自身,因此try 使用JSON.stringify解析该对象将导致循环引用错误.

// you can test this in your browser console
const obj = {};
obj.self = obj;
JSON.stringify(obj);

这意味着我们需要确保通过dotNetHelper.invokeMethodAsync传递的对象没有任何循环引用,并且可以使用JSON.stringify进行解析.

为此,您可以使用this.series.chart.series中所需的数据创建一个新对象,并传递新对象.While ensuring the properties also do not have circular references

function itemEvent() {     
    const allSeries = this.series.chart.series;
    const simpleSeries = allSeries.map(s=> ({
        name: s.name,
        data: s.data
    }));
    window.dotNetHelper.invokeMethodAsync('Items', simpleSeries);
}

BlazorFiddle snippet设置与演示,判断浏览器控制台日志(log),以了解不同的行为.

Javascript相关问答推荐

使用脚本标签时的JSDoc智能感知

Webpack将懒惰加载的模块放入主块中

获取POS餐厅会话用户/收银员

验证嵌套 colored颜色 代码的结果

无法在page. evalve()内部使用外部函数

Fastify错误:CORS策略已阻止从起源api-dev.example.com上的MLhttp请求

仅在React和JS中生成深色

是什么原因导致此Angular 16电影应用程序中因类型错误而不存在属性?

如何访问Json返回的ASP.NET Core 6中的导航图像属性

如何在表格上拥有水平滚动条,在正文页面上拥有垂直滚动条,同时还对html表格的标题使用位置粘性?

Vega中的模运算符

fs. writeFile()vs fs.writeFile()vs fs.appendFile()

JSDoc创建并从另一个文件导入类型

第二次更新文本输入字段后,Reaction崩溃

如何在不影响隐式类型的情况下将类型分配给对象?

回溯替代方式

try 将Redux工具包与MUI ToggleButtonGroup组件一起使用时出错

删除元素属性或样式属性的首选方法

使用线性插值法旋转直线以查看鼠标会导致 skip

如果对象中的字段等于某个值,则从数组列表中删除对象