Question

让KendoUI React Grid显示数据时遇到了一些麻烦。我的应用程序是带有Redux和KendoUI的ASP.NET Core React。我已经阅读了Telerik自己的文档，而我的代码完全没有错误。

我还可以在控制台网络监视器中看到控制器返回的数据，但是网格只是说有no records available。有人可以帮助我了解我哪里出错了吗？

到目前为止，这是我的代码：

ClientApp / src / components / fixtures / withState.js

import React from 'react';
import { toDataSourceRequestString, translateDataSourceResultGroups } from '@progress/kendo-data-query';

export function withState(WrappedGrid) {
    return class StatefullGrid extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                dataState: { skip: 0, take: 100 }
            };
        }

        render() {
            return (
                <WrappedGrid
                    filterable={true}
                    sortable={true}
                    pageable={{ pageSizes: true }}
                    {...this.props}
                    total={this.state.total}
                    data={this.state.data}
                    skip={this.state.dataState.skip}
                    pageSize={this.state.dataState.take}
                    filter={this.state.dataState.filter}
                    sort={this.state.dataState.sort}
                    onDataStateChange={this.handleDataStateChange}
                />
            );
        }
        componentDidMount() {
            this.fetchData(this.state.dataState);
        }
        handleDataStateChange = (changeEvent) => {
            this.setState({ dataState: changeEvent.data });
            this.fetchData(changeEvent.data);
        }
        fetchData(dataState) {
            const queryStr = `${toDataSourceRequestString(dataState)}`;
            const hasGroups = dataState.group && dataState.group.length;
            const base_url = 'api/VesselData/GetGridVessels';
            const init = {
                method: 'GET', accept: 'application/json', headers: {}
            };

            fetch(`${base_url}?${queryStr}`, init)
                .then(response => response.json())
                .then(({ data, total }) => {
                    this.setState({
                        data: hasGroups ? translateDataSourceResultGroups(data) : data,
                        total,
                        dataState
                    });
                });
        }
    }
}

我已经在浏览器中检查了base_url，并且它返回的数据没有任何问题。

ClientApp / src / views / Fixtures.js

import * as React from 'react';
import { GridColumn, Grid } from '@progress/kendo-react-grid';
import { withState } from '../components/fixtures/withState';

const StatefullGrid = withState(Grid);

class Fixtures extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div>
                <h3>Fixtures</h3>
                <StatefullGrid>
                    <GridColumn field="Name" title="Name" />                        
                </StatefullGrid>
            </div>
        );
    }
}

export default Fixtures;

Controllers / VesselDataController.cs

using Microsoft.AspNetCore.Mvc;
using Shelly.Data;
using Shelly.Services;
using System.Collections.Generic;
using Kendo.Mvc.UI;
using Kendo.Mvc.Extensions;

namespace Shelly.UI.Controllers
{
    [Produces("application/json")]
    [Route("api/[controller]")]
    public class VesselDataController : Controller
    {
        private readonly IVesselService vesselService;

        public VesselDataController(IVesselService vesselService)
        {
            this.vesselService = vesselService;
        }

        [HttpGet("[action]")]
        public JsonResult GetGridVessels([DataSourceRequest] DataSourceRequest request)
        {
            var vessels = vesselService.GetVessels();
            var result = vessels.ToDataSourceResult(request);
            return Json(result);
        }
    }
}

就像我说的那样，一个断点表明正在请求base_url并且正在将数据返回给客户端，但是，网格只是说no records available就像是我进行了一次连线。我错过了。

有人可以协助吗？

为什么我的Kendo React Grid不显示我的数据？

0 个答案: