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.
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.