Ahora estoy aprendiendo React y tengo un problema con el componente de renderizado. Código de aplicación.js:
function App() { const [expenses, setExpenses] = useState(INITIAL_EXPENSES); const addNewExpenseHandler = (expense) => { setExpenses((prevState) => { return [expense, ...prevState]; }, changeYearHandler(filteredYear)); }; const filterExpenses = (expenses, year) => { const newFilteredExpenses = expenses.filter((expense) => { if (String(expense.date.getFullYear()) === year) { return expense; } }); return newFilteredExpenses; }; const [filteredYear, setFilteredYear] = useState('2019'); const [filteredExpenses, setFilteredExpenses] = useState( filterExpenses(expenses, filteredYear) ); const changeYearHandler = (value) => { setFilteredYear( value, setFilteredExpenses(() => { const newValue = filterExpenses(expenses, value); return newValue; }) ); }; return ( <> <NewExpense onAddNewExpense={addNewExpenseHandler} /> <ExpenseFilter expenses={expenses} /> <ShowExpenses onChangeYear={changeYearHandler} data={filteredExpenses} /> </> ); } export default App; El problema es que filteredExpenses no está actualizado. Siempre es retardado y es el estado anterior. Estaba tratando de llamar a changeYearHandler en la devolución de llamada de setExpenses y setFilteredExpense dentro de setFilteredYear pero aún no funciona y no sé por qué.
Se siente como si estuviera utilizando una forma indirecta de filtrar sus expenses . ¿Qué hay de simplemente crear una versión memorizada de un filteredExpenses directamente, usando useMemo() ?
const filteredExpenses = useMemo(() => { return expenses.filter((expense) => { if (String(expense.date.getFullYear()) === filteredYear) { return expense; } }); }, [expenses, filteredYear]); La matriz de dependencia garantizará que cada vez que cambien expenses o filteredYear , los gastos filteredExpenses volverán a calcular y devolverán una nueva matriz filtrada (que posteriormente se almacena en caché).