1

我正在尝试将 ReactDataGrid 用于我的 Web 应用程序。但是我在渲染时遇到了问题。我有Cluster要渲染的对象。集群可以通过点击一一选择或者也有select all功能。当我单击全选按钮时，数据网格会平滑地呈现所有数据。然而，当我尝试一一选择集群时，数据网格开始于render数组的第二个对象之后。我试图看看发生了什么console.log()。例如，当数组中有一个对象时，数组的长度打印为0。所以，它每次都从-1开始。

这是集群对象。在对象下方，我打印了它的长度。

console.log("this.props.ClusterPointsArray: ",this.props.ClusterPointsArray);
console.log("this.props.ClusterPointsArray.Length: ",this.props.ClusterPointsArray.length);

对象-数组关系有什么问题吗？我的意思是我应该将对象转换为数组吗？

请帮忙。

在此处输入图像描述

在此处输入图像描述

这是ClusterDetailGrid组件文件。

import React, {Component} from 'react';
import ReactDataGrid from 'react-data-grid';
import {mapArrayReselect, ConnectComponent} from 'flightsuit';
import moment from 'moment';
import _ from 'lodash';


export default ConnectComponent(class ClusterDetailGrid extends Component {

    state = {
        isClusterDetailActive: false,
    };

    static mapState2Props(state) {
        return {
            activeTenant: state.tenant.activeTenant,
            activeRoutesStopList: state.route.activeRoutesStopList,
            activeClusters: state.ClusterProfile.activeClusters,
            selectedClusters: state.ClusterProfile.selectedClusters,
            ClusterPointsArray: state.ClusterProfile.ClusterPointsArray,
            ClusterPoints: state.ClusterProfile.ClusterPoints,
            profilesList: state.ClusterProfile.profilesList,
            activeProfile: state.ClusterProfile.activeProfile
        };
    }

    constructor(props) {
        super(props);

        this._columnss = [


            {
                key: 'ClusterName',
                name: 'Cluster Name'
            },
            {
                key: 'CustomerRefNo',
                name: 'Customer Number'
            },
            {
                key: 'CustomerName',
                name: 'Customer Name'
            }


        ];

    }

    componentWillMount() {
    }

    componentDidMount() {
    }

    componentWillUpdate(nextProps) {
            this.createRows(nextProps.ClusterPointsArray);
    }

    createRows(Cluster) {
        let rows = [];
        for(let i = 0; i < Cluster.length; i++) {
            for(let j = 0; j < Cluster[i].location.length; j++){
                rows.push({

                    ClusterName: Cluster[i].Name,
                    CustomerRefNo: Cluster[i].location[j].Name,
                    CustomerName: Cluster[i].location[j].Description!=null?Cluster[i].location[j].Description:" "
                });
            }

        }

        this._rows = rows;

    }

    rowGetter(i) {
        return this._rows[i];
    }


    render() {

        console.log("this.props.ClusterPointsArray: ",this.props.ClusterPointsArray);
        console.log("this.props.ClusterPointsArray.Length: ",this.props.ClusterPointsArray.length);
        return  (
            this.props.ClusterPointsArray.length > 0 ?
                <ReactDataGrid
                    columns={this._columnss}
                    rowGetter={this.rowGetter.bind(this)}
                    rowsCount={this._rows.length}
                    overScan={{
                        colsStart: 5,
                        colsEnd: 5,
                        rowsStart: 5,
                        rowsEnd: 25
                    }}
                />
                :
                <div>Your cluster details are loading...</div>
        );
    }


});
4

0 回答 0