ReactJS:使用localStorage保存数据中断，错误为超过最大更新深度

Question

我有一个组件Home，可以根据状态以不同的方式进行渲染。

我正在尝试从本地存储设置Home的状态

/*
The AuthContext

const globalState = {
email: null,
token: null
};
*/
export default function Home() {
const [user, setUser] = useContext(AuthContext);
useEffect(() => {
const token = localStorage.getItem('token') || null;
const email = localStorage.getItem('email') || null;
setUser({email, token});
})
}

这个错误不断出现，我不知道如何解决

超过了最大更新深度。当组件在useEffect 内调用setState时，可能会发生这种情况

我试图删除useEffect，但弹出了另一个错误

超过了最大更新深度。当组件在componentWillUpdate或componentDidUpdate 内重复调用setState时，可能会发生这种情况

我知道这个错误是由重复调用setUser引起的。

但是我不知道如何只调用一次setUser。

Answer 1

useEffect()在项目渲染时被调用，设置状态会导致组件重新渲染。向useEffect块添加一个空的依赖项数组。这将允许块仅在初始渲染时运行。

const [user, setUser] = useContext(AuthContext);
useEffect(() => {
const token = localStorage.getItem('token') || null;
const email = localStorage.getItem('email') || null;
setUser({email, token});
}, [])

由于这种情况应该只发生一次，并且useState有点多余，因此可以使用useMemo获得相同的结果。这有点不太习惯，因为从localStorage获取数据是一种副作用，但在这种情况下更简单。

const user = useMemo(() => {
const token = localStorage.getItem('token') || null;
const email = localStorage.getItem('email') || null;

return { email, token };
}, [])