React 应用程序的渲染顺序 - 为什么会发生"Too many re-renders"错误？

Question

我是React和修改现有starter应用程序的新手。

我正在实现一个检查，看看用户是否登录，基于在localStorage中的令牌的存在。我修改了我的App.js文件如下:

function App() {
let [ isLoggedIn, setLoggedIn ] = useState(false);
return (
<><Index isLoggedIn={isLoggedIn} setLoggedIn={setLoggedIn} /></>
);

:

function App() {
let [ isLoggedIn, setLoggedIn ] = useState(false);
const storageToken = localStorage.getItem('token');
if (storageToken) {
setLoggedIn(true);
} else {
setLoggedIn(false);
}
return [same as above]

此更改导致Uncaught Error: Too many re-renders.错误。把检查放到Index.js中就可以了。

更深入地研究这个(例如从这个其他问题或这篇博客文章)，我理解这是因为你不能在同一个函数中修改状态，你用useState声明它，因为状态改变会导致整个函数再次运行。但我的问题是:为什么?我怀疑这是关于React如何工作的背景信息/React调用组件的顺序，所以任何关于这个主题的背景阅读都会很受欢迎!

Answer 1

我认为你应该阅读这篇文章，以了解在这些情况下Reactjs是如何工作的

Answer 2

App是一个功能组件，它的代码在每次渲染时都运行。改变状态会触发一个新的渲染。通过在函数主体中调用setLoggedIn()，您创建了一个无限循环。

解决方案是仅在组件挂载/卸载时从localStorage读取。这可以通过一个效果来实现。

useEffect(() => {
// code to run on component mount
const storageToken = localStorage.getItem('token');
if (storageToken) {
setLoggedIn(true);
} else {
setLoggedIn(false);
}
}, []);