Javascript 如何在此react组件中分解对象的状态数组以使用单个字段数据

我在一个数组中有96个对象，它们在获取后处于组件状态。它们都是唯一的对象，除了年份，在某些情况下是月份。年份不能静态设置，因为它在某一点上会发生明显的变化。月份将从

整数

转换为

字符串

。我已经尝试映射它，但我得到一个错误，即

无法读取未定义的属性映射。但是，如果我
console.log
data，我将得到包含96个对象的数组。当我试图对其进行解构时，我得到一个错误
试图对不可重用实例进行解构的无效尝试
我的主要目标是将年份作为模板文本传递给
标题名
，以便它作为下面所有数据的分组列加载。要获取月份整数并将其转换为该月份的字符串，此组件的代码如下所示

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;

每年都是一样的。映射返回96年，其中95年我不需要。它会改变的，我希望这是动态的实地一年。我需要访问月份，以便将4月份的
整数
更改为
字符串
3
 没有内置的JS方法将月数格式化为字符串，您可以自己构建：

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

您需要在映射之前进行验证。要特别彻底地检查它是否存在以及它是否是一个数组：

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>
    )
  }
}

render（）{
if（this.state.rowData&&Array.isArray（this.state.rowData））{
var items=this.state.rowData
}
返回(
{items&&items.map（item=>item.Year}
)
}
}

如果您需要一个基于当前年份的项目，请使用查找：

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>
    )
}

render（）{
if（this.state.rowData&&Array.isArray（this.state.rowData））{
var item=this.state.rowData.find（data=>data.year===newdate（）.getFullYear）
}
返回(
{item&`${item.year}-${this.numToMonth（item.month）}}
)
}

如果您需要基于当前年度筛选器的多个项目：

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>
    )
}

render（）{
if（this.state.rowData&&Array.isArray（this.state.rowData））{
var items=this.state.rowData.filter（data=>data.year===newdate（）.getFullYear）
}
返回(
{item&&items.map（items=>{item.year}-{this.numToMonth（item.month）}）
)
}

如果所有人都有相同的年份，并且您需要一组月数作为字符串：

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>
    )
  }
}

render（）{
if（this.state.rowData&&Array.isArray（this.state.rowData））{
var items=this.state.rowData
}
返回(
{items&&items[0]。年份}
{items&&items.map（item=>{this.numToMonth（item.month）}
)
}
}

最后一个示例的可运行代码段：


类SomeComponent扩展React.Component{
陈述={
行数据：[
{年份：1988年，月份：1}，
{年份：1988年，月份：3}，
{年份：1988年，月份：2}，
{年份：1988年，月份：1}，
]
}
纽顿（北）{
开关（n）{
案例1：
返回“Jan”
案例2：
返回'Feb'
案例3：
返回“三月”
//……所有月份
违约：
返回'Dec'
}
}
render（）{
if（this.state.rowData&&Array.isArray（this.state.rowData））{
var items=this.state.rowData
}
返回(
{items&&items[0]。年份}
{items&&items.map（item=>{this.numToMonth（item.month）}
)
}
}
ReactDOM.render(
,
document.getElementById（“react”）
);
没有内置的JS方法可以将月数格式化为您可以自己构建的字符串：

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

您需要在映射之前进行验证。要特别彻底地检查它是否存在以及它是否是一个数组：

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>
    )
  }
}

render（）{
if（this.state.rowData&&Array.isArray（this.state.rowData））{
var items=this.state.rowData
}
返回(
{items&&items.map（item=>item.Year}
)
}
}

如果您需要一个基于当前年份的项目，请使用查找：

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>
    )
}

render（）{
if（this.state.rowData&&Array.isArray（this.state.rowData））{
var item=this.state.rowData.find（data=>data.year===newdate（）.getFullYear）
}
返回(
{item&`${item.year}-${this.numToMonth（item.month）}}
)
}

如果您需要基于当前年度筛选器的多个项目：

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>
    )
}

render（）{
if（this.state.rowData&&Array.isArray（this.state.rowData））{
var items=this.state.rowData.filter（data=>data.year===newdate（）.getFullYear）
}
返回(
{item&&items.map（items=>{item.year}-{this.numToMonth（item.month）}）
)
}

如果所有人都有相同的年份，并且您需要一组月数作为字符串：

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>
    )
  }
}

render（）{
if（this.state.rowData&&Array.isArray（this.state.rowData））{
var items=this.state.rowData
}
返回(
{items&&items[0]。年份}
{items&&items.map（item=>{this.numToMonth（item.month）}
)
}
}

最后一个示例的可运行代码段：


类SomeComponent扩展React.Component{
陈述={
行数据：[
{年份：1988年，月份：1}，
{年份：1988年，月份：3}，
{年份：1988年，月份：2}，
{年份：1988年，月份：1}，
]
}
纽顿（北）{
开关（n）{
案例1：
返回“Jan”
案例2：
返回'Feb'
案例3：
返回“三月”
//……所有月份
违约：
返回'Dec'
}
}
render（）{
if（this.state.rowData&&Array.isArray（this.state.rowData））{
var items=this.state.rowData
}
返回(
{items&&items[0]。年份}
{items&&items.map（item=>{this.numToMonth（item.month）}
)
}
}
ReactDOM.render(
,
文件
   formatMonth = (x) =>{
      var months = ['January', 'February', 'March', ..., 'December']
      return months[x-1]
   }