• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Pruebas Online
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

154
Vistas
la matriz de objetos como accesorios no me dará los valores adecuados

Quiero hacer una barra de progreso y tengo dos componentes. este es mi componente gráfico:

 import Bar from "./Bar"; const INIT_MONTH_EXPENSES = [ { label: "Jan", value: 0 }, { label: "Feb", value: 0 }, { label: "Mar", value: 0 }, { label: "Apr", value: 0 }, { label: "May", value: 0 }, { label: "Jun", value: 0 }, { label: "Jul", value: 0 }, { label: "Aug", value: 0 }, { label: "Sep", value: 0 }, { label: "Oct", value: 0 }, { label: "Nov", value: 0 }, { label: "Dec", value: 0 }, ]; const Chart = (props) => { const totalExpenseAmountOfYear = props.items.reduce((total, item) => { total = +total + +item.amount; return total; }, 0); for (const expense of props.items) { const expenseMonth = expense.date.getMonth(); INIT_MONTH_EXPENSES[expenseMonth].value += expense.amount; } //INIT_MONTH_EXPENSES[2].value give me the expected value but props.expenses[2].value in the Bar component give me a wrong value(actually doubled value) return ( <div className="bg-pink-200 w-full h-[150px] p-4 mb-8 flex"> <Bar expenses={INIT_MONTH_EXPENSES} totalAmount={totalExpenseAmountOfYear} /> </div> ); }; export default Chart;

el problema es que cuando registro los "gastos" de accesorios pasados en el otro componente, me da valores incorrectos. cualquier ayuda será apreciada.

almost 3 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Cuando pasa un objeto declarado en el componente principal al componente secundario, para que Reaccione vuelva a representar los componentes para el estado actualizado, tendrá que usar ganchos useState o useReducer para notificar al motor de reacción que algo ha cambiado y lo necesito. para volver a renderizar los componentes.

En el ejemplo, solo está mutando el objeto existente y cuando lo hace, la reacción no tiene idea de que algo ha cambiado, por lo que termina sin representar el componente secundario con los datos actualizados.

 import Bar from "./Bar"; import { useState, useEffect } from 'react'; const INIT_MONTH_EXPENSES = [{ label: "Jan", value: 0 }, { label: "Feb", value: 0 }, { label: "Mar", value: 0 }, { label: "Apr", value: 0 }, { label: "May", value: 0 }, { label: "Jun", value: 0 }, { label: "Jul", value: 0 }, { label: "Aug", value: 0 }, { label: "Sep", value: 0 }, { label: "Oct", value: 0 }, { label: "Nov", value: 0 }, { label: "Dec", value: 0 }, ]; const Chart = (props) => { // store the expenses in state so that it can be passed along. // only run the initializer when the component is mounted const [expenses, setExpenses] = useState(() => { return [...INIT_MONTH_EXPENSES]; }); const [totalExpenses, setTotalExpenses] = useState(0); const { items } = props; useEffect(() => { const updatedExpenses = items.reduce((memo, item) => { const expenseMonth = item.date.getMonth(); if(memo[expenseMonth]) { memo[expenseMonth].value += expense.amount; } return memo; }, [...expenses]); // this will notify react that state changed and will re render the component setExpenses(updatedExpenses); }, [items]); // use effect to cal total expenses useEffect(() => { const totalExpenseAmountOfYear = items.reduce((total, item) => { total = +total + (+item.amount); return total; }, 0); setTotalExpenses(totalExpenseAmountOfYear); }, [items]); return ( < div className = "bg-pink-200 w-full h-[150px] p-4 mb-8 flex" > < Bar expenses = { expenses } totalAmount = { totalExpenses } /> < /div> ); }; export default Chart;
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

También debe asegurarse de que setState no se llame directamente en el renderizado. Por lo general, debe llamarse en useEffect , por lo que tendrá que averiguar cuándo deben actualizarse los gastos.

almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda