0
290
VisualizaçõesObtener la cantidad de veces que aparece un elemento en una matriz antes de que los valores únicos en React Code no funcionen
En este mi proyecto, tengo una matriz de objetos donde debo obtener los valores únicos para poder usar los valores únicos como una etiqueta de casilla de verificación. Ahora, eso funciona bien, pero el problema ahora es que necesitaba obtener los números de ocurrencia frente a los valores. No puedo obtener esto en este momento porque los valores ahora devuelven solo los valores únicos usando el método Set. Ejemplo de formulario... Quiero tener algo como 2021-10-25(3) 2021-10-18(1) 2021-10-04(2).
enlace para repetir enlace de repetición
Aquí está mi código App.js
import "./styles.css"; import React, { useEffect, useState, useRef } 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" } ]; return ( <div className="App"> {[ ...new Set(Defaultdata.map((a) => a.delivery_time_frame.substr(0, 10))) ].map((dates, i) => ( <label style={{ listStyle: "none" }} key={i}> <input type="checkbox" value={dates} /> <span>{dates}({dates.length})</span> </label> ))} </div> ); }1 Respostas
Responde à pergunta0
Primero puede crear un useFilteredValuesAndCounts que devolverá un objeto que contenga dataSet y countObj .
1) dataSet contendrá fechas únicas
2) countObj es un objeto que contiene la occurrence de cada fecha
Demo en vivo
function useFilteredValuesAndCounts(arr) { const countObj = {}; const set = new Set(); arr.forEach((a) => { const date = a.delivery_time_frame.substr(0, 10); countObj[date] = (countObj[date] ?? 0) + 1; set.add(date); }); return { dataSet: [...set], countObj }; } export default useFilteredValuesAndCounts;y en JSX simplemente puede usar como:
const { dataSet, countObj } = useFilteredValuesAndCounts(Defaultdata); return ( <div className="App"> {dataSet.map((dates, i) => ( <label style={{ listStyle: "none" }} key={i}> <input type="checkbox" value={dates} /> <span> {dates}({countObj[dates]}) </span> </label> ))} </div> );