Encontré toneladas de preguntas relacionadas con este problema, pero aún no pude averiguar qué está mal con mi código usando el método de matriz .reduce() .
Considere estos simples datos de juguetes:
const myRecords = [ { name: "john", preferredColor: "green" }, { name: "diana", preferredColor: "red" }, { name: "george", preferredColor: "yellow" }, { name: "ron", preferredColor: "green" }, { name: "sarah", preferredColor: "red" }, { name: "rachel", preferredColor: "red" }, { name: "nicole", preferredColor: "yellow" }, { name: "chris", preferredColor: "red" }, ];Quiero resumir estos datos en un objeto que resuma cada color:
{ colorCount: { red: number, yellow: number, green: number } } Con este fin, reduce parece una elección natural. Aquí está mi implementación que no funciona:
// my attempt const res = myRecords.reduce( (acc, person) => // reducer person.preferredColor === "green" ? (acc.colorCount.green += 1) : person.preferredColor === "yellow" ? (acc.colorCount.yellow += 1) : (acc.colorCount.red += 1), { colorCount: { red: 0, yellow: 0, green: 0 } } // init value );pero me sale este error
No se pueden leer las propiedades de indefinido (leyendo 'rojo')
No puedo envolver mi cabeza alrededor de esto. Mi código parece bastante sencillo. No me falta una declaración de return porque la función reductora es una función de flecha sin alcance {} . ¿Dónde está el error?
Vi tu código, y deberías devolver la acc reduce. Creé otra versión de la solución e incrementé el contador de color correspondiente según el valor del color preferredColor . Puede verificarlo aquí:
const myRecords = [ { name: "john", preferredColor: "green" }, { name: "diana", preferredColor: "red" }, { name: "george", preferredColor: "yellow" }, { name: "ron", preferredColor: "green" }, { name: "sarah", preferredColor: "red" }, { name: "rachel", preferredColor: "red" }, { name: "nicole", preferredColor: "yellow" }, { name: "chris", preferredColor: "red" }, ]; const result = myRecords.reduce((prev, curr) => ({ ...prev, colorCount: { ...prev.colorCount, [curr.preferredColor]: prev.colorCount[curr.preferredColor] + 1 } }), { colorCount: { red: 0, yellow: 0, green: 0 } }) console.log(result)No creo que pueda obtener el resultado que desea con el método de reducción, pero el siguiente código funciona.
const myRecords = [ { name: "john", preferredColor: "green" }, { name: "diana", preferredColor: "red" }, { name: "george", preferredColor: "yellow" }, { name: "ron", preferredColor: "green" }, { name: "sarah", preferredColor: "red" }, { name: "rachel", preferredColor: "red" }, { name: "nicole", preferredColor: "yellow" }, { name: "chris", preferredColor: "red" }, ]; const result = { colorCount: { red: 0, yellow: 0, green: 0 } }; myRecords.forEach(rec => { rec.preferredColor === "green" ? (result.colorCount.green += 1) : rec.preferredColor === "yellow" ? (result.colorCount.yellow += 1) : (result.colorCount.red += 1); }); console.log(result);