Нижний колонтитул в таблице реакции дает «Справочные данные об ошибках не определены» - PullRequest
Новая
       10

Нижний колонтитул в таблице реакции дает «Справочные данные об ошибках не определены»

0 голосов
/ 03 февраля 2019

Я делаю вызов API и отображаю результаты в React-Table.То, что я хочу показать дополнительно в нижнем колонтитуле, я хочу показать сумму значений столбца для столбца totalCount.Я дал ниже мой код, и я получаю ReferenceError: data is not defined в Footer: <span>{_.sum(_.map(data, d => d.totalCount))}</span>

Мои данные выборки Json из API будут 

[
  {
    "receiveDate": "2019-01-28",
    "hour": "00",
    "integrationName": "lms_job",
    "totalCount": 61
  },
  {
    "receiveDate": "2019-01-28",
    "hour": "01",
    "integrationName": "lms_job",
    "totalCount": 43
  }
]

Если я переместу const columns блок внутри class BalancingTable extends React.Component, то работает как положено.Но у меня есть и другой код, который предназначен для загрузки данных в CSV, и эта логика требует от меня размещения столбцов const вне приложения.

Так что, если я уберу эти 2 строки, код все равно будет работать без логики нижнего колонтитула. 

Cell: props => <span>{props.value}</span>,
Footer: <span>{_.sum(_.map(data, d => d.totalCount))}</span>

Поскольку я хотел сохранить константные столбцы вне приложения, существует ли способ решения этой проблемы, который предоставляет необходимую сумму столбцов? 

import React from 'react'
import { bindActionCreators } from 'redux'
import PropTypes, { object } from 'prop-types'
import { withStyles } from '@material-ui/core/styles'
import Button from '@material-ui/core/Button'
import axios from 'axios'
import ReactTable from 'react-table'
import '../FirmJson/ReactTableCustom.css'
import _ from "lodash";

const styles = theme => ({
})

const columns = [
  {
    Header: 'Date',
    accessor: 'receiveDate',
    width: 80,
  },
  {
     Header: 'Hour',
     accessor: 'hour',
     width: 50,
  },
  {
    Header: 'Integration',
    accessor: 'integrationName',
    width: 140,
  },
  {
    Header: 'Total Count',
    accessor: 'totalCount',
    width: 105,
    id: 'totalCount',
    Cell: props => <span>{props.value}</span>,
    Footer: <span>{_.sum(_.map(data, d => d.totalCount))}</span>
  },
]
class BalancingTable extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      data: [],
      isLoaded: false,
    }
    this.handleSubmit = this.handleSubmit.bind(this)
  }

  handleSubmit (index) {
    let url = 'https://myapp.company.com/balancing/lms/2019-01-29'
      axios.get(url).then(response => {
      this.setState({
        data: response.data,
        isLoaded: true,
      })
    }).catch()
}

  render () {
    var {isLoaded,data} = this.state
    const { classes } = this.props

    if (isLoaded) {
      return (
        <div>
          <div>
            <ReactTable ref={(r) => this.reactTable = r}
              columns={columns}
              data={data}
              filterable
              defaultFilterMethod={(filter, row) =>
                String(row[filter.id]).toLowerCase().includes(filter.value.toLowerCase())}
              style={{
                minWidth: '800px',
                border: '50px',
              }}
            />
          </div>
        </div>
      )
    } 
    else
    { 
      return(
      <div>
        <Button variant="raised" color="primary" aria-label="ret" onClick={this.handleSubmit}>
          Submit
        </Button>
      </div>
      )
    } 
  }
}

BalancingTable.propTypes = {
  classes: PropTypes.object.isRequired,
}

export default (withStyles(styles)(BalancingTable))
...