热重装时过多的useEffect触发器

Question

环境: React18，redux工具包(createAsyncThunk)，没有StrictMode.

我的应用程序的useEffect在App.tsx中。App.tsx是index.tsx的一个子级，其中定义了存储。

  useEffect(() => {
   const defaultTerms = defaultTuples[~~(Math.random() * defaultTuples.length)];
   dispatch(getData({ terms: defaultTerms })
  );
}, [dispatch]);

它选择两个随机单词并运行createAsyncThunk，通过这个单词获取数据，并设置这些数据和两个单词来存储。因为我希望这个操作只执行一次--这个useEffect没有依赖项(只有调度是这个useEffect的dep )。

在正常的应用程序使用过程中，一切都很正常，但是在开发(热重加载)期间，每个代码都会更改(在定义了useEffect的文件中)运行这个useEffect，并为它们添加越来越多的单词/数据来存储。我在找一种方法来改变这种行为。

Answer 1

我试图将这个初始请求移出，但得到了相同的行为。看起来像React完全破坏了这个文件和下面的树，但是当存储在这个组件上面初始化时，存储会记住旧的值，所以我们在那里添加多余的数据。

作为目前的解决方案：I将这个初始请求移动到src/index.tsx并将其从组件中删除

import { store } from 'toolkit/store';
import { getData } from 'toolkit/slices';

const data = defaultTuples[~~(Math.random() * defaultTuples.length)];
const defaultReq = () => {
 store.dispatch(getData({ data }));
};
defaultReq();

root.render(
 <ErrorBoundary>
  <BrowserRouter>
   <App>
    .............

Answer 2

在严格模式中，React会两次调用您的效果，以帮助您找到意外杂质。这是只开发的行为，不影响生产。如果您的效果是纯的(正如它们应该的那样)，那么这不应该影响组件的逻辑。其中一个调用的结果将被忽略。