带有 useState 的 useEffect 无限循环

Question

我正在尝试检查 authState 是否为真，以便向用户显示我的侧边栏。它有效，但我得到一个无限循环。

这里是useEffect和useState

const [ authState, setAuthState ] = useState({
      username: "", 
      id: 0, 
      status: false
    });

useEffect(() => {
   axios.get('http://localhost:4000/users/auth/v', {withCredentials: true}).then((res) => {
        console.log(res.data);
        if (res.data.error) {
          setAuthState({ ...authState, status: false });
        } else {
          setAuthState({
            username: res.data.username, 
            id: res.data.id, 
            status: true
          });
          console.log(authState);
        }
      });

  },[authState]);

编辑：我实际上是在使用一个useContext

  return (
    <>
      <AuthContext.Provider value={{ authState, setAuthState }}>
        <Router>
        <Sidebar />
          <Switch>
            <Route path='/' exact component={Auth} />
            <Route path='/users/add' exact component={AddUser} />
            <Route path='/users' exact component={UserList} />
            <Route path='/users/:id' exact component={UserEdit} />
            <Route path='/roles/add' exact component={AddRole} />
            <Route path='/roles' exact component={RoleList} />
            <Route path='/roles/:roleId' exact component={EditRole} />
            <Route path='/logout' exact component={Logout} />
          </Switch>
        </Router>
      </AuthContext.Provider>
    </>
  );
}

更新

现在使用此代码，但是当我进入时，比如说/users，我需要刷新页面以让侧边栏将authState 的状态识别为true然后显示侧边栏

  useEffect(() => {
    axios.get('http://localhost:4000/users/auth/v', {withCredentials: true}).then((res) => {
      console.log(res.data);
      if (res.data.error) {
        setAuthState({ ...authState, status: false });
      } else {
        setAuthState({
          username: res.data.username, 
          id: res.data.id, 
          status: true
        });
      }
    });
  },[]);

这是我的侧边栏

function Sidebar() {

    const [ sidebar, setSidebar ] = useState(false);

    let userData = localStorage.getItem('user');
    // console.log(userData);

    const { authState } = useContext(AuthContext);
    

    const showSidebar = () => setSidebar(!sidebar)

    return (
        <>
        {authState.status &&
        <Styles>
            <Navbar bg="light">
            <Navbar.Brand>
                <NavIcon>
                    <MenuIcon onClick={showSidebar} />
                </NavIcon>
            </Navbar.Brand>
            <Navbar.Text className="user-options">
                <span className='user-name'>Hello, {userData}!</span> {/* WIP input user's fname and lname via context */}
                <span className='logout-link'><Link to="/logout">Logout</Link></span>
            </Navbar.Text>
            </Navbar>
            <Sidenav sidebar={sidebar}>
                <SidebarWrap>
                    <NavIcon>
                        <HighlightOffIcon onClick={showSidebar} />
                    </NavIcon>
                    <SidebarList>
                        {SidebarData.map((val, key) => {
                            return (
                                <li 
                                    key={key}
                                    className='row'

                                > 
                                    <Link 
                                    className='link-style' 
                                    to={val.link}
                                    id={window.location.pathname === val.link
                                        ? "active"
                                        : ""}
                                        >
                                        <SideIcon>{val.icon}</SideIcon>
                                        <SideTitle>{val.title}</SideTitle> 
                                    </Link>
                                </li>
                            )
                        })}
                    </SidebarList>
                </SidebarWrap>
            </Sidenav>
        </Styles>
        }
        </>
    )
}

Answer 1

由于在 useEffect 结束时您正在更改 authState，因此它再次调用 useEffect。我建议有一个标志来触发检查 authState 是否已更新并停止循环，代码可能有点错误，因为我刚刚在这里写了：P，在调用 setAuthState 之前，您还必须将 updateAuth 设置为 true。如果你希望它只在开始时像 Hamza Khursheed 所说的那样运行，只需从依赖数组中删除 authState（使用效果的第二个参数）

const [ authState, setAuthState ] = useState({
  username: "", 
  id: 0, 
  status: false
});
const [ updateAuth, setUpdateAuthState ] = useState(false)

 useEffect(() => {
  if(updateAuth){
    axios.get('http://localhost:4000/users/auth/v', {withCredentials: 
        true}).then((res) => {
       console.log(res.data);
    if (res.data.error) {
      setAuthState({ ...authState, status: false });
    } else {
      setAuthState({
        username: res.data.username, 
        id: res.data.id, 
        status: true
      });
      setUpdateAuthState(false);
      console.log(authState);
    }
  });
 }
 },[authState]);

Answer 2

您应该调整依赖数组以反映您希望 useEffect 触发的更改。如果您想在路由更改时获得授权状态，这应该可以：

React.useEffect(() => {
    axios
        .get('http://localhost:4000/users/auth/v', { withCredentials: true })
        .then((res) => {
            console.log(res.data);
            if (res.data.error) {
                setAuthState({ ...authState, status: false });
            } else {
                setAuthState({
                    username: res.data.username,
                    id: res.data.id,
                    status: true,
                });
                console.log(authState);
            }
        });
}, [window.location.pathname]);