reactjs useEffect运行多次

zaq34kh6  于 2023-01-30  发布在  React
关注(0)|答案(1)|浏览(278)

我的要求如下。
1.过滤器状态更改-〉页面状态应设置为1,然后应运行getData()
1.页面状态更改-〉getData()应运行
我试着把上面的情景写下来。

useEffect(() => {
  setPage(1);
}, [filters]);

useEffect(() => {
  getData();
}, [filters, page]);

但是,在第一个场景中,getData()运行了两次。如果有人能帮助解决这个问题,我将不胜感激。

lf5gs5x2

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]);

相关问题