如何在2个状态发生变化时只渲染一次useEffect

Question

我有一个食谱网站，其中我有两个变化的状态类别和．我想调度一些基于更改类别和页面的操作。

所以，我用一个useEffect分类和一个useEffect页面。

const [category, setCategory] = useState('All');
const page = query.get('page') || 1;
useEffect(()=>{
dispatch(getCards(category,1))
navigate(`/card?category=${category}&page=1`);
},[dispatch,category])
useEffect(()=>{
dispatch(getCards(category,page))
navigate(`/card?category=${category}&page=${page}`);
},[dispatch,page])

现在，我想要的是，如果两个状态同时改变，那么只有一个useEffect应该被触发。有没有办法。

比如，当类别改变时，useEffect for category被调用，它分派相应的动作并导航，然后在导航之后，同样的分派动作被调用，所以，我不希望同一个动作被调用两次

同样，在初始渲染中，同样的动作被调用两次(因为类别useEffect和页面useEffect在初始渲染中运行一次)

Answer 1

• 创建新状态管理页面更改
• 在更新分类的函数中将页码更新为1
• 按如下方式更新您的useEffect以仅在页面更改时触发

const [page, setPage] useState(query.get('page') || 1);
const updateCategory = (_category) => {
setCategory(_category);
setPage(1);
}
useEffect(()=>{
dispatch(getCards(category,page))
navigate(`/card?category=${category}&page=${page}`);
//eslint-disable-next-line
},[dispatch,page])