时间戳

首页 > 解决方案 > 错误：重新渲染过多。对后端的帖子做出反应

javascript - 错误：重新渲染过多。对后端的帖子做出反应

问题描述

export default function CRouter() {
  const [token, setToken] = useLocalStorage('auth', '')
  const [user, setUser] = useState(false);
  const GetUser = () => {
    if (token !== "" && !user) {
      axios.post('/auth/getUser', { token }).then(res => {
        if (res.status === 200) {
          setUser(res.data);
        } else {
          setToken('');
          setUser(false);
          //mandarlo al login
        }
      })
    }
  }
  useEffect(() => {
    GetUser()
  }, [user])
  return (
    <Router>
      <NavBar user={user}></NavBar>
      <Switch>
       

        <Route
          exact
          path="/auth/login"
          render={(props) => (
            <Login user={user}></Login>
          )}
        >

        </Route>


      </Switch>
    </Router>
  );
}


  //Error: Too many re-renders.
  22 | if (token !== "" && !user) {
  23 |   axios.post('/auth/getUser', { token }).then(res => {
  24 |     if (res.status === 200) {
> 25 |       setUser(res.data);
  26 |     } else {
  27 |       setToken('');
  28 |       setUser(false);

这是错误，我之前做过这个并且工作过，我如何查看循环从哪里开始任何建议？因为在发布后用户是真实的并且它没有进入循环所以我不知道为什么会发生

标签： javascriptreactjs

解决方案

由于错误使用钩子而出现错误。

  useEffect(() => {
    GetUser()
  }, [user])

这里GetUser会一直调用user更改，因为您添加了依赖项[user]。现在，GetUser将使用setUser更改user。所以，这是一种递归，哪里GetUser会改变user，什么时候user会GetUser被调用。

修理

  useEffect(() => {
    GetUser()
  }, []) // remove user

推荐阅读