[英]React state doesn't refresh value
我现在正在学习 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
,但它仍然不起作用,我不知道为什么。
感觉就像您正在使用迂回的方式来过滤您的expenses
。 使用useMemo()
直接创建filteredExpenses
费用的记忆版本怎么样?
const filteredExpenses = useMemo(() => {
return expenses.filter((expense) => {
if (String(expense.date.getFullYear()) === filteredYear) {
return expense;
}
});
}, [expenses, filteredYear]);
依赖数组将确保无论何时expenses
或filteredYear
年发生变化, filteredExpenses
费用将重新计算并返回一个新的过滤数组(随后被缓存)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.