Renderizar el siguiente componente devuelve
Los objetos no son válidos como hijos de React
import moment from "moment"; const PayrollRuns = (props) => { const runItems = props.payrollRuns.map((run) => <div key={run.id} className="flex justify-between p-2 text-lg"> <div> {moment(run.month.period).format('YYYY MMMM')}: Paid {run.payroll_run_items.length} talents </div> <div> {run.payroll_run_items.reduce((acc, value) => { return value.amount; })} </div> </div> ); return ( <div className="runs-wrapper bg-white rounded-xl h-full w-48 shadow-sx-shadow p-4 flex flex-col"> <h1 className="border-b-2 pb-4">Payroll Runs</h1> <div className="grow overflow-auto p-4">{runItems}</div> </div> ) } export default PayrollRunsPodría profundizar el problema en esta parte:
<div> {run.payroll_run_items.reduce((acc, value) => { return value.amount; })} </div>Entonces, ¿el error significa que el método de reducción devuelve un objeto en lugar de un valor único? En caso afirmativo, ¿cómo solucionar esto? Y si no, ¿cuál más podría ser el problema?
Parece que está tratando de obtener un valor único agregándolo de la matriz payroll_run_items .
No ha especificado un valor inicial para el acumulador, ni está recopilando el value.amount ninguna parte.
Aquí hay un ejemplo simple para lograr lo que quieres:
const payroll_run_items = [{ amount: 34, // Other properties }, { amount: 35, // Other properties }] console.log(payroll_run_items.reduce((acc, value) => { return value.amount + acc; // Add 'value.amount' to 'acc' }, 0)) // Specify a start value