为什么我的RXJS史诗在挂载时处于无限循环中，但只在点击按钮时调用一次

Question

请查看下面的代码

基本上，我的行动被派往这里：

useEffect(() => {
fetchData()
setLoaded(true)
}, [])

但由于某种原因，这是无限循环，并导致我的操作被连续发送

export const fetchData = () => ({ type: 'GET_USER_DATA' })

这触发了我史诗般的

const getUserData = (action$, state$) =>
action$.pipe(
ofType('GET_USER_DATA'),
mergeMap(
(action) =>
ajax
.getJSON(
`myurlishere`,
)
.pipe(map((response) => fetchUserFulfilled(response))),
)
)

触发这个：

const fetchUserFulfilled = (payload) => ({ type: 'GET_DATA_SUCCESS', data: payload })

这段代码都有效，但它在无限循环中不断调用它

但是，如果我将代码从useEffect移动到类似这样的按钮调用：

<button onClick={fetchData}>fetch</button>

它只调用一次，这就是我想要的

但我需要调用onmount的数据。那么我该怎么修呢？

请注意，我已经尝试在useEffect的第二个论点中添加各种内容，但它对没有影响

useEffect(() => {
fetchData()
setLoaded(true)
}, [user.id])

Answer 1

仅基于提供的代码，我看不到任何问题。我的直觉建议了一些选择，尽管你提到了其中的一些，但我会三次检查：

1. 缺少依赖项数组作为使用Effect的第二个参数，或者您正在为其使用一个变量，但该变量具有undefined值，这也会有同样的问题
2. 如果您正在使用useEffect依赖项，可能其中一个依赖项在不知不觉中不断变化。例如，对象经常在渲染之间改变身份，{} !== {}
3. 有一些未显示的代码也在调度相同的操作，事实上useEffect只运行一次
4. 某个父级正在使用key={something}渲染某个祖先或该组件，并且在每次渲染时提供的值都会更改。如果发生这种情况，每次都会从零开始拆除并重新创建组件

如果你100%肯定你提供了useEffect(work, [])，一个空数组作为第二个参数，但事实上，这种效果被证实是在无限循环中同步运行的，那么第四种可能性很可能出现。

如果你在发布这篇文章时手动在问题中键入了这些代码示例，请不要相信你以与你认为的应用程序相同的方式实现了它们。三重检查。理想情况下，让其他人检查谁没有写代码。通常的问题是，我们认为我们告诉代码要做的并不是我们实际告诉它要做的。如果你还没有，你最好的办法是使用调试器逐步完成代码，这样你就可以看到发生了什么。

希望这能有所帮助！

Answer 2

这是正在工作的代码：

export const getUserDataEpic = () => {
return ajax
.getJSON(myurl)
.pipe(
map((response) => fetchUserFulfilled(response)),
)
}

我知道我现在没有听到开火的动作，但为什么会引起无限循环？