javascript - 在reactJS中动态创建的数组长度

标签 javascript reactjs jsx react-admin

我有一个来自 API 的类似数组:

[
{
    "clicks": {
        "2019-01": [
            {
                "clicks": "194",
                "type": 0,
                "user": 19
            },
            {
                "clicks": "414",
                "type": 0,
                "user": 19
            },
            {
                "clicks": "4",
                "type": 90,
                "user": 20
            },
            {
                "clicks": "3",
                "type": 90,
                "user": 21
            }
        ],
        "2019-02": [
            {
                "clicks": "2",
                "type": 2,
                "user": 17
            },
            {
                "clicks": "1",
                "type": 1,
                "user": 19
            }
        ]
    }
}
]

我想统计每个月的所有点击次数。

到目前为止我写了这个:

const MyMonthlyClickCount = ({ record }) => {
    console.log("bla", record);
    var fLen, i, myMonth;
    fLen = record.id.length;
    myMonth = record.id;
    for (i =0; i < fLen; i++) {
       var ads, all, phone, z, mLen;
       mLen = `record.clicks.${myMonth[i].yearmonth}`.length;
       console.log("mLen:", mLen);
    }
    return (<StatusTextField source="record.clicks.2019-01.name" statusK="valami" />)
}

但是 mLen 并没有做我想要的事情。它当前计算字符串中的字符。

我希望 mLen 返回数组长度。

我怎样才能做到这一点?

console.log 的输出:

bla {clicks: {…}, id: Array(2)}
clicks: 2019-01: (32) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
2019-02: (6) [{…}, {…}, {…}, {…}, {…}, {…}]
__proto__: Object
id: (2) [{…}, {…}]
__proto__: Object

mLen: 21

最佳答案

值得添加更多数据,但就这样吧。

let rawData = [
  {
    "clicks": {
        "2019-01": [
            {
                "clicks": "47",
                "id": 63,
                "type": 0,
                "user": 5
            },
            {
                "clicks": "459",
                "id": 5,
                "type": 0,
                "user": 5
            }
       ],
        "2019-02": [
            {
                "clicks": "0",
                "id": 44,
                "type": 0,
                "user": 12
            }
         ]
      }
   }
];

const MyMonthlyClickCount = (record) => {
  if(Array.isArray(record) === false) record = [record];
  return record.map(year => {
    let arrMonth = [];
    for(mth in year.clicks) {
      let m = {
        month: mth,
        clicks: year.clicks[mth].reduce((a,v) => a+=parseInt(v.clicks),0)
      };
      arrMonth.push(m);
    }
    return arrMonth;
  });
};



console.log(MyMonthlyClickCount(rawData));
console.log(MyMonthlyClickCount(rawData[0]));

关于javascript - 在reactJS中动态创建的数组长度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55251866/

相关文章:

javascript - 在 react native 应用程序中加载主屏幕之前显示模式

javascript - ReactJS:如何水平渲染列

javascript - 在 SVG 中绘制 "squiggly line"

ios - 如何修复不为 iOS 构建的 React Native App

reactjs - 尝试使用 Form.Select 和 Semantic-UI-React 从名称的下拉选择中获取 id 值?

javascript - 导航组件丢失 Prop 。 react 路由器错误?

javascript - 使用 React Router 隐藏组件

reactjs - onIonChange 在 Ionic 5 React 上触发多个输入

javascript - new Date().setFullYear(new Date().getFullYear()) 返回一个 13 位数字

javascript - 使用 AJAX 将 slider 加载到 div 中