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

Question

我一直认为在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) }, [])

Answer 1

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

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

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

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

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