Saya memiliki 96 objek dalam array dalam status komponen setelah pengambilan. Mereka semua adalah objek unik kecuali tahun dan dalam beberapa kasus bulan. Tahun tidak dapat diatur secara statis karena jelas akan berubah di beberapa titik. Bulan akan dikonversi dari Integer menjadi String. Saya telah mencoba memetakannya tetapi saya mendapatkan kesalahan yang mengatakan cannot read property map of undefined. Namun, jika saya console.log data, saya akan mendapatkan array dengan 96 objek. Dan ketika saya mencoba untuk merusaknya saya mendapatkan kesalahan Invalid attempt to destructure non-iterable instance. Tujuan Utama saya adalah mengambil tahun dan meneruskannya sebagai templat literal ke headerName sehingga memuat sebagai kolom yang dikelompokkan untuk semua data di bawah ini. Dan untuk mengambil bilangan bulat bulan dan mengubahnya menjadi string bulan itu Kode saya untuk komponen ini ada di bawah.

import React, { Component } from "react";
import { AgGridReact } from "ag-grid-react";

class ColumnGroups extends Component {
  constructor(props) {
    super(props);

    this.state = {
      columnDefs: [
        {
          headerName: "Year",
          field: "year",
          children: [
            {
              headerName: "Month",
              field: "month",
              width: 150,
              children: [
                  {
                  headerName: "Sold",
                  field: "sales",
                  width: 150
              },
              {
                  headerName: "Return",
                  field: "returns",
                  width: 150
              },
              {
                  headerName: "RMA%",
                  field: "rma",
                  width: 150
              }
                  ]
              }

              ],
              defaultColDef: {
                  editable: false,
                  sortable: true,
                  resizable: true,
                  filter: true
                },
                rowSelection: "multiple",
                rowGroupPanelShow: "always",
                pivotPanelShow: "always",
                paginationPageSize: 10,
                paginationNumberFormatter: function(params) {
                  return "[" + params.value.toLocaleString() + "]";
                },
                rowData: []


          }

      ],
  }

  }
  onGridReady = params => {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;

    const httpRequest = new XMLHttpRequest();
    const updateData = data => {
      this.setState({ rowData: data });
      params.api.paginationGoToPage(4);
    };

    httpRequest.open(
      "GET",
      "http://localhost:5000/api/salessummary"
    );
    httpRequest.send();
    httpRequest.onreadystatechange = () => {
      if (httpRequest.readyState === 4 && httpRequest.status === 200) {
        updateData(JSON.parse(httpRequest.responseText));
      }
    };
  };

  onPageSizeChanged(newPageSize) {
    var value = document.getElementById("page-size").value;
    this.gridApi.paginationSetPageSize(Number(value));
  }

render() {
  {console.log(this.state.rowData)}
    return (
        <div>
            <div>
                <div 
    className="ag-theme-balham"
    style={{ 
    height: '500px', 
    width: '100%' }} 
  >
      <div className="test-header">
        Page Size:
        <select onChange={this.onPageSizeChanged.bind(this)} id="page-size">
          <option value="10" selected="">
            10
          </option>
          <option value="100">100</option>
          <option value="500">500</option>
          <option value="1000">1000</option>
        </select>
      </div>
    <AgGridReact
      columnDefs={this.state.columnDefs}
      rowData={this.state.rowData}
      autoGroupColumnDef={this.state.autoGroupColumnDef}
      defaultColDef={this.state.defaultColDef}
      suppressRowClickSelection={true}
      groupSelectsChildren={true}
      debug={true}
      rowSelection={this.state.rowSelection}
      rowGroupPanelShow={this.state.rowGroupPanelShow}
      pivotPanelShow={this.state.pivotPanelShow}
      enableRangeSelection={true}
      pagination={true}
      paginationPageSize={this.state.paginationPageSize}
      paginationNumberFormatter={this.state.paginationNumberFormatter}
      onGridReady={this.onGridReady}
      >

    </AgGridReact>
  </div>
            </div>
        </div>

    )
}
}
export default ColumnGroups;

Inilah bagian yang kembali Tidak dapat membaca properti 'peta' yang tidak ditentukan

   <div>
           {
    this.state.rowData.map(data => <div>{data.year}</div> )
  }
</div>

Datanya seperti di bawah ini

{
"year": 2019,
"month": 4,
"productStyle": "zzzzz",
"sales": 1,
"returns": 0,
"rma": 0
},

Setiap tahun sama persis. Pemetaan kembali 96 tahun 95 dari mereka saya tidak perlu. Dan itu akan berubah Saya ingin ini menjadi dinamis untuk tahun lapangan. Dan saya perlu mengakses bulan agar saya dapat mengubah integer menjadi string 3 untuk April dll.

1
Bama 28 Oktober 2019, 18:19

2 jawaban

Jawaban Terbaik

Tidak ada metode JS bawaan untuk memformat angka Bulan menjadi string yang dapat Anda buat sendiri:

numToMonth(n){
    switch(n){
        case 1:
           return 'Jan'
        //... all months
        default:
           return 'Dec'
        }
}

Anda perlu memvalidasi sebelum Anda memetakan. Agar lebih teliti, periksa apakah itu ada dan apakah itu array:

render(){
    if(this.state.rowData && Array.isArray(this.state.rowData)){
        var items = this.state.rowData
    }
    return(
        <div>
            {items && items.map(item => <div>{item.Year}</div> )}
        </div>
    )
  }
}

Jika Anda membutuhkan satu item berdasarkan tahun berjalan, gunakan find:

render(){
    if(this.state.rowData && Array.isArray(this.state.rowData)){
        var item = this.state.rowData.find(data => data.year === new Date().getFullYear )
    }

    return(
        <div>
            {item && `${item.year} - ${this.numToMonth(item.month)}` }
        </div>
    )
}

Jika Anda membutuhkan banyak item berdasarkan filter tahun ini:

render(){
    if(this.state.rowData && Array.isArray(this.state.rowData)){
        var items = this.state.rowData.filter(data => data.year === new Date().getFullYear )
    }

    return(
        <div>
            {item && items.map(items=> <div>{item.year} - {this.numToMonth(item.month)} </div>})
        </div>
    )
}

Jika semua memiliki tahun yang sama dan Anda membutuhkan dan banyak nomor bulan sebagai string:

render(){
    if(this.state.rowData && Array.isArray(this.state.rowData)){
        var items = this.state.rowData
    }
    return(
        <div>
            {items && items[0].year}
            {items && items.map(item => <div>{this.numToMonth(item.month)}</div> )}
        </div>
    )
  }
}

Cuplikan yang dapat dijalankan dari contoh terakhir:

class SomeComponent extends React.Component {
  state={
    rowData:[
      {year:1988,month:1},
      {year:1988,month:3},
      {year:1988,month:2},
      {year:1988,month:1},
    ]
  }
  numToMonth(n){
    switch(n){
        case 1:
           return 'Jan'
        case 2:
           return 'Feb'
        case 3:
           return 'March'
        //... all months
        default:
           return 'Dec'
        }
  }
  render(){
    if(this.state.rowData && Array.isArray(this.state.rowData)){
        var items = this.state.rowData
    }
    return(
        <div>
            {items && items[0].year}
            {items && items.map(item => <div>{this.numToMonth(item.month)}</div> )}
      </div>
    )
  }
}

ReactDOM.render(
  <SomeComponent />,
  document.getElementById("react")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>

<div id="react"></div>
2
Willman.Codes 28 Oktober 2019, 17:44

Anda dapat tahun ini untuk negara Anda, seperti itu.

state = {
   ...
   currentYear: new Date().getFullYear();
}

Kemudian Anda dapat memfilter data menurut this.state.currentYear.

var data = this.state.rowData.find((x)=>{return x.year === this.state.currentYear})

Tampaknya rowData harus berupa larik untuk AgGridReact, jadi tulis rowData={[data]} untuk AgGridReact prop rowData.

Sunting

Jika Anda akan memfilter data ini dalam tabel berdasarkan tahun (misalnya Anda ingin melihat data tahun sebelumnya) tambahkan fungsi onChange changeYear yang akan menyetel status dan mengubah tahun. Lihat di bawah.

changeYear = (year) =>{
    this.setState({
        currentYear: year
    })
}

Saat status diperbarui, data akan difilter ulang dan hanya mencerminkan data untuk tahun yang baru dipilih.

Adapun bulan, Anda dapat membuat nomor menjadi string seperti itu.

   formatMonth = (x) =>{
      var months = ['January', 'February', 'March', ..., 'December']
      return months[x-1]
   }
1
Matt Croak 28 Oktober 2019, 16:29