组件从单个调度中进行两个api调用

Question

我遇到了一个问题，我的组件正在进行两个api调用，而不是一个。我正在使用reactjs/toolkit的react和react redux。我尝试了不同的解决方案，比如在useEffect钩子中更改dependency数组，更改请求头，查看整个代码库以找到另一个调用。什么都没用。我也试过这个，但没用。为什么我的获取查询在我的React组件中运行多次

我希望这段代码在组件安装后不久调用api一次。

Redux开发工具显示有两个api调用。一个接一个。开发工具中的操作截图。

这里调度api调用。

useEffect(() => {
dispatch(fetchPosts('hot', ''));
}, [dispatch]);

整个项目都在这里：https://github.com/chpiotr06/Reddit-minimal/tree/dev

获取暴徒看起来像这样：

export const fetchPosts = createAsyncThunk(
'wall/fetchPosts',
async (type, query) => {
const response = await Reddit.fetchPosts(type, query);
const data = await response.json();
return data;
}
)

Reddit.fetchPosts(正在进行的工作(：

const Reddit = {
fetchPosts: (type, query) => {
return fetch(`https://www.reddit.com/${type}.json`, {
method: 'GET',
mode: 'cors',
})
},
}

Answer 1

不确定这是否是正确的猜测，但这可能与严格模式有关吗？如果你在index.js中注释掉<React.StrictMode>，它还会渲染两次吗？

编辑：很高兴我能帮忙！

我对严格反应模式做了一些研究，并想在这里分享我的发现。严格模式可以帮助您在开发模式下调试代码(它对生产没有影响，所以如果您发现组件渲染两次，也不用担心(。通常，打开它被认为是最佳实践，因为它将有助于检测不推荐使用的代码并发现不需要的副作用。

现在讨论双重渲染：在版本18中，react正在为可以多次安装和卸载的组件做准备，同时保留它们的状态。实际上，为了实现这一点，组件将不是传统意义上的卸载(从组件树中删除(，而是对用户隐藏。React仍然会调用相同的旧卸载函数来告诉组件它被隐藏了，但它也会保存它的状态，以将组件像以前一样放回屏幕上。这意味着，如果一个效果没有正确清理订阅，它的状态仍然存在，并且在重新发布时会在其上添加react save状态。

Strictmode通过安装、卸载和重新安装组件来模拟这些未来的更改，同时保持其状态。这就是为什么评论<React.StrictMode>可以让你的应用程序工作，但也是为什么不推荐使用它的原因。然而，为了继续工作并保持理智，这是我所知道的唯一方法；(

进一步阅读：

在上有一条非常有趣的线索https://github.com/reactwg/react-18/discussions/19关于严格模式下的双重渲染。包括Andarist/Mateusz Burzyński对redux中出现的问题的细分。

当然，文档：https://reactjs.org/docs/strict-mode.html#ensuring-可重复使用状态