反应状态不刷新值

Question

我现在正在学习React，但在重新渲染组件时遇到了问题。应用程序。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;

问题是filtered开支不是最新的。它总是弱智，这是以前的状态。我试图调用一个ChangeYearHandler在setFilteredDay和setFilteredExpense的回调中，但是它仍然不起作用，我不知道为什么。

Answer 1

const filteredExpenses = useMemo(() => {
    return expenses.filter((expense) => {
        if (String(expense.date.getFullYear()) === filteredYear) {
            return expense;
        }
    });
}, [expenses, filteredYear]);

依赖项数组将确保无论何时费用或过滤数据项发生更改，那么过滤数据项都将重新计算并返回一个新的过滤数组（随后缓存）。