时间戳

首页 > 解决方案 > 为什么我没有进入 React 无限重新渲染循环？

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

问题描述

我一直认为在调用setState内部有任何形式的useEffect调用都会导致无限的重新渲染循环，因为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)
}, [])

标签： javascriptreactjsnext.jsuse-effect

解决方案

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

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

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

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

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

推荐阅读