我的要求如下。1.过滤器状态更改-〉页面状态应设置为1,然后应运行getData()1.页面状态更改-〉getData()应运行我试着把上面的情景写下来。
useEffect(() => { setPage(1); }, [filters]); useEffect(() => { getData(); }, [filters, page]);
但是,在第一个场景中,getData()运行了两次。如果有人能帮助解决这个问题,我将不胜感激。
lf5gs5x21#
当在react中激活严格模式时,useEffect被激活两次是正常的,要停用严格模式,您可以删除标记,默认情况下,它们位于创建rootElement的位置,例如:
import React, { StrictMode } from 'react'; import { createRoot } from 'react-dom/client'; import App from './App'; const rootElement = document.getElementById('root'); const root = createRoot(rootElement); root.render( <StrictMode> <App /> </StrictMode> );
发生这种情况的另一个原因是:当更新过滤器状态时,两个useEffect将被激活,因为参数中传递了[filters],这样,getData()将在第二个useEffect中被调用,当运行第一个useEffect改变页面状态时,第二个useEffect将被再次调用,因为参数中传递了[page],我认为这样可以解决您的问题:
useEffect(() => { setPage(1); }, [filters]); useEffect(() => { getData(); }, [page]);
1条答案
按热度按时间lf5gs5x21#
当在react中激活严格模式时,useEffect被激活两次是正常的,要停用严格模式,您可以删除标记,默认情况下,它们位于创建rootElement的位置,例如:
发生这种情况的另一个原因是:当更新过滤器状态时,两个useEffect将被激活,因为参数中传递了[filters],这样,getData()将在第二个useEffect中被调用,当运行第一个useEffect改变页面状态时,第二个useEffect将被再次调用,因为参数中传递了[page],我认为这样可以解决您的问题: