热重载时过度使用Effect触发

Question

环境：React18，redux-toolkit（createAsyncThunk），无 StrictMode。

我的应用程序的

App.tsx

中有useEffect。

App.tsx

是定义 store 的

index.tsx

的子级。

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

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

在正常应用程序使用期间一切正常，但在开发期间（热重载）每次代码更改（在定义 useEffect 的文件中）运行此 useEffect 并添加越来越多的单词/数据以供存储。 我正在寻找一种方法来避免这种行为。

Answer 1

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

Answer 2

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

作为目前的解决方案：我将此初始请求移至

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>
    .............