React中统计数组元素出现次数并生成带计数去重标签的代码运行异常

实现方案 #

你可以先遍历原数组统计每个日期的出现次数，再渲染即可，不需要单独用Set去重，统计的过程中自然就得到了唯一值和对应的计数。

修改后的完整代码 #

import "./styles.css";
import React from "react";

export default function App() {
 
 const Defaultdata = [
  {
    date_listed: "4 hours ago",
    id: "7857699961",
    delivery_time_frame: "2021-10-25 - 2021-11-14",
    distance: "22.8 km",
    time_stamp: "2021-10-25 16:36:54",
    watched: "yes"
  },
  {
    date_listed: "3 days ago",
    id: "8358962006",
    delivery_time_frame: "2021-10-18 - 2021-10-24",
    distance: "4.3 km",
    time_stamp: "2021-10-22 16:54:12"
  },
  {
    date_listed: "4 hours ago",
    delivery_id: "8146462294",
    delivery_time_frame: "2021-10-25",
    distance: "4.3 km",
    time_stamp: "2021-10-25 16:12:32"
  },
  {
    date_listed: "4 hours ago",
    delivery_id: "8146462294",
     delivery_time_frame: "2021-10-04 - 2021-11-14",
    distance: "4.3 km",
    time_stamp: "2021-10-25 16:12:32"
  },
  {
    date_listed: "4 hours ago",
    delivery_id: "8146462294",
    delivery_time_frame: "2021-10-25 - 2021-10-31",
    distance: "4.3 km",
    time_stamp: "2021-10-25 16:12:32"
  },
  {
    date_listed: "4 hours ago",
    delivery_id: "8146462294",
    delivery_time_frame: "2021-10-04 - 2021-11-14",
    distance: "4.3 km",
    time_stamp: "2021-10-25 16:12:32"
  }
];

// 统计每个日期的出现次数
const dateCountMap = {};
Defaultdata.forEach(item => {
  const dateKey = item.delivery_time_frame.substr(0, 10);
  dateCountMap[dateKey] = (dateCountMap[dateKey] || 0) + 1;
});

  return (
    <div className="App">
      {/* 遍历统计对象渲染复选框 */}
      {Object.entries(dateCountMap).map(([date, count], i) => (
        <label style={{ listStyle: "none", display: "block", margin: "4px 0" }} key={i}>
          <input
            type="checkbox"
            value={date}
          />
          <span>{date}({count})</span>
        </label>
      ))}
    </div>
  );
}

运行后即可得到你需要的展示效果：2021-10-25(3)、2021-10-18(1)、2021-10-04(2)。

内容的提问来源于stack exchange，提问作者s life