过度使用热重新加载时会触发效果

Question

环境：React18，redux工具包(createAsyncThunk(，无StrictMode。

我在应用程序的App.tsx中使用了Effect。App.tsx是其中定义了存储的index.tsx的子级。

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

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

在正常的应用程序使用过程中，一切都很正常，但在开发过程中(热重载(每次代码更改(在定义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>
.............