各位开发者好，
我的Blazor组件遇到了一个涉及JavaScript互操作的问题。具体来说，当尝试在JavaScript中获取对表体的引用并处理其行时，我遇到了JSON格式化错误。错误消息表明，从JavaScript接收的JSON值无法转换为Microsoft.JSInterop.IJSObjectReference[]。我已经包含了Blazor组件和JavaScript代码的相关部分。
有没有其他人遇到过类似的问题，或者可以提供有关导致此问题的原因的见解？我感谢您在解决此JSON转换挑战方面的任何帮助或指导。提前感谢您的专业知识！

**请注意：**我在一个Razor类库中工作，该类库被Blazor服务器应用程序和MAUI Blazor应用程序引用。未引用JavaScript代码，只是为了测试我是否获得任何值，我正在使用javascript代码。我想将数据插入SQL表中，但无法这样做。

<tbody id="table-body">
    <!-- Rows will be added here dynamically -->
    @for (int index = 0; index < Items.Count; index++)
    {
        var item = Items[index];
        <tr>
            <td>
                <div style="display: flex; align-items: center;">
                    <input type="checkbox" class="me-1" @bind="item.Selected" />
                    @(index + 1)
                    <button class="ms-2 btn btn-sm btn-danger" @onclick:preventDefault @onclick="() => DeleteRow(index)" style="display: @(item.Selected ? "block" : "none")">Delete</button>
                </div>
            </td>
            <td><input type="text" class="form-control" @bind="item.Name" /></td>
            <td><input type="text" class="form-control" @bind="item.Quantity" /></td>
            <td>
                <input type="text" list="uomOptions" class="form-control" @bind="item.UOM" />
                <datalist id="uomOptions">
                    <option value="Piece"></option>
                    <option value="Each"></option>
                    <option value="Box"></option>
                    <!-- Add more UOM options as needed -->
                </datalist>
            </td>
            <td>
                <input type="date" class="form-control" @bind="item.RequiredBy" min="@DateTime.Now.ToString("dd-MM-yyyy")" />
            </td>
        </tr>
    }
</tbody>

x

<div class="col-12">
    <button class="btn btn-primary rounded-pill" @onclick="AddRow">Add Row</button>
    <button class="btn btn-primary rounded-pill" @onclick="StoreAndCallCSharpMethod">Get Data</button>
</div>

<script defer>
    // JavaScript method to store values in an array and log to console
    function storeAndCallCSharpMethod() {
        var dataArray = [];
        // Loop through each dynamically added row
        var tableBody = document.getElementById('table-body');
        var rows = tableBody.getElementsByTagName('tr');
        for (var i = 0; i < rows.length; i++) {
            var row = rows[i];
            var inputs = row.getElementsByTagName('input');
            // Get values from input fields
            var name = inputs[1].value;
            var quantity = inputs[2].value;
            var uom = inputs[3].value;
            var requiredBy = inputs[4].value;
            // Store values in an object
            var rowData = {
                Name: name,
                Quantity: quantity,
                UOM: uom,
                RequiredBy: requiredBy
            };
            // Add the object to the array
            dataArray.push(rowData);
        }
        // Log the array to the console
        console.log(dataArray);
    }
</script>

@code {
    List<Item> dataArray = new List<Item>();
    public async Task GetAndLogTableData()
    {
        // Get table body from JS
        var tableBody = await JSRuntime.InvokeAsync<IJSObjectReference>("eval", "document.getElementById('table-body')");
        // Get all rows
        var rows = await tableBody.InvokeAsync<IJSObjectReference[]>("querySelectorAll", "tr");
        foreach (var row in rows)
        {
            // Get input fields within the current row
            var inputs = await row.InvokeAsync<IJSObjectReference[]>("querySelectorAll", "input");
            // Map to RowData object
            var rowData = new Item
                {
                    Name = await inputs[1].InvokeAsync<string>("value"),
                    Quantity = await inputs[2].InvokeAsync<string>("value"),
                    UOM = await inputs[3].InvokeAsync<string>("value"),
                    RequiredBy = await inputs[4].InvokeAsync<DateTime>("value") // Assuming RequiredBy is a string, adjust accordingly
                };
            // Add to list
            dataArray.Add(rowData);
        }
        foreach (var data in dataArray)
        {
            await insert.PRInsert(data.Name, data.Quantity, data.UOM, data.RequiredBy);
            Console.WriteLine($"{data.Name}, {data.Quantity}, {data.UOM}, {data.RequiredBy}");
        }
    }
}

的数据

使用下面的方法会显示与长度相关的错误：Microsoft.JSInterop.JSException：Could not find 'get'（'get' was undefined）.我尝试了不同的方法，但都无效

private async Task StoreAndCallCSharpMethod()
{
    var tableBody = await JSRuntime.InvokeAsync<IJSObjectReference>("eval", "document.getElementById('table-body')");
    var rows = await tableBody.InvokeAsync<IJSObjectReference>("getElementsByTagName", "tr");
    for (int i = 0; i < await rows.InvokeAsync<int>("get", "length"); i++)
    {
        var row = await rows.InvokeAsync<IJSObjectReference>("get", i);
        var inputs = await row.InvokeAsync<IJSObjectReference>("getElementsByTagName", "input");
        var name = await inputs.InvokeAsync<string>("get", 1, "value");
        var quantity = await inputs.InvokeAsync<string>("get", 2, "value");
        var uom = await inputs.InvokeAsync<string>("get", 3, "value");
        var requiredBy = await inputs.InvokeAsync<string>("get", 4, "value");
        var rowData = new Item
            {
                Name = name,
                Quantity = quantity,
                UOM = uom,
                RequiredBy = DateTime.Parse(requiredBy)
            };
        dataArray.Add(rowData);
    }
    // Log the list to the console
    Console.WriteLine("Logging from C#:");
    foreach (var data in dataArray)
    {
        Console.WriteLine($"{data.Name}, {data.Quantity}, {data.UOM}, {data.RequiredBy}");
    }
}

型

任何对我遇到的各种错误感兴趣的人都可以参考下面的ChatGPT聊天Chat