Estoy tratando de calcular el total de mis cursos. Estoy pasando una declaración de función al curso pero está bloqueando mi aplicación. Estoy tratando de establecer la suma dentro de una función addExercises .
Tengo un componente llamado Contenido:
function Content({ parts }) { const [sum, setSum] = useState(0) return ( <div> {parts.map(part => ( <Part name={part.name} exercise={part.exercises} key={part.id} addExercises={() => setSum(sum + part.exercises)} /> ))} Total Exercises: {sum} </div> ) }Entonces tengo una parte componente: -
function Part({name, exercise, addExercises}) { addExercises(); return ( <div> <p>{name} {exercise}</p> </div> ) }Estoy pasando estos datos al contenido como accesorios: -
parts: [ { name: 'Fundamentals of React', exercises: 10, id: 1 }, { name: 'Using props to pass data', exercises: 7, id: 2 }, { name: 'State of a component', exercises: 14, id: 3 }Llamas a addExercises cada vez que se procesa el componente.
Esto cambia el valor de la sum que activa una nueva representación.
IR A 1
Tienes un bucle infinito.
Tal vez quieras que tu llamada de función esté dentro del gancho useEffect .
Tal vez no debería pasarlo al componente en absoluto, pero coloque un useMemo en el componente principal que genera la sum al recorrer la matriz por separado.
function Content({ parts }) { const sum = useMemo(() => { return parts.reduce( (total, part) => { return total + part.exercises; }, 0 ); }, [parts]);