反應 state 不刷新值

Question

我現在正在學習 React，但我在重新渲染組件時遇到了問題。 App.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;

問題是filteredExpenses不是最新的。 它總是遲鈍，它是以前的 state。 我試圖在setFilteredYear內的setExpenses和setFilteredExpense的回調中調用changeYearHandler ，但它仍然不起作用，我不知道為什么。

Answer 1

感覺就像您正在使用迂回的方式來過濾您的expenses 。 使用useMemo()直接創建filteredExpenses費用的記憶版本怎么樣？

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

依賴數組將確保無論何時expenses或filteredYear年發生變化， filteredExpenses費用將重新計算並返回一個新的過濾數組（隨后被緩存）。