为什么我没有进入 React 无限重新渲染循环？答案

【问题标题】：Why do I not get into a React infinite re-render loop?为什么我没有进入 React 无限重新渲染循环？
【发布时间】：2021-06-17 00:51:24
【问题描述】：

我一直认为在useEffect 调用中包含任何形式的setState 都会导致无限的重新渲染循环，因为每次渲染都会调用useEffect。但由于某种原因，我的代码很好，而且我的 Next.js 应用程序运行良好。我能知道我的知识差距在哪里吗？

const [base, setBase] = useState(DEFAULT_BASE)
const [rateData, setRateData] = useState([])
const [symbolList, setSymbolList] = useState([])

// At the start, we want to display the rates in terms of EUR
useEffect(async () => {
  const data = await calculator(FETCH_DATA, base)
  setRateData(data)
  // Create the symbol list
  const symbols = []
  Object.keys(data).map((c) =>
    symbols.push(c)
  )
  setSymbolList(symbols)
  console.log(symbolList)
}, [])

【问题讨论】：

您的useEffect 有空依赖项，那么您为什么希望它重新运行？（免责声明：我并不是说，你所做的设计是好是坏）
如果你省略第二个参数（非空数组），它只会在每次渲染时运行。
一些不相关的东西，但不要对 useEffect 函数使用异步。 useEffect 不希望返回任何内容或返回通常称为清理函数的函数。通过写 async 它返回一个 Promise。参考这个stackoverflow.com/questions/53332321/…
这能回答你的问题吗？ In useEffect, what's the difference between providing no dependency array and an empty one?

标签： javascript reactjs next.js use-effect

【解决方案1】：

最后你有一个空数组作为参数。

UseEffect 带有一个空的[] 依赖数组意味着只在componentDidMount 时运行，这只在组件第一次加载时执行。

不传递该参数将导致在更改任何状态变量并且每次重新渲染时调用它（类似于您的预期）。

如果您将变量传递给数组，则仅当该变量更改时才会调用它。您也可以拥有多个 useEffect 函数，因此您也可以选择性地渲染。

在此处阅读注意事项：https://reactjs.org/docs/hooks-effect.html

【讨论】：