Reactjs 一个钩子上下文给我循环渲染的错误为什么？

我开始学英语了。我试图用钩子创建一个auth。 但我犯了一个错误：

componentWillUpdate或componentDidUpdate。React限制了 嵌套更新以防止无限循环

这是我的代码，我试图简化组件，我希望它是清楚的

export const AuthContext = React.createContext();
export const AuthProvider = ({children}) => {
    const [currentUser, setCurrentUser] = useState(null);
    useEffect( () => {
        //const token    = localStorage.getItem( 'token' );
        //const userName = localStorage.getItem( 'userName' );
        console.log('useEffect Auth Provider');
        console.log(currentUser);
    }, [] );
    return (
        <AuthContext.Provider
          value={
            [currentUser, setCurrentUser]
          }
        >
          {children}
        </AuthContext.Provider>
      );
}

export const AuthContext=React.createContext（）；
导出常量AuthProvider=（{children}）=>{
const[currentUser，setCurrentUser]=useState（null）；
useffect（（）=>{
//const token=localStorage.getItem（'token'）；
//const userName=localStorage.getItem（'userName'）；
log（'useffect Auth Provider'）；
console.log（当前用户）；
}, [] );
返回(
{儿童}
);
}

当我尝试登录到login.js时：

export const Login = () => {

    const [ currentUser, setCurrentUser ] = useContext( AuthContext );


     // Login
     const handleLogin = (event) => {
         event.preventDefault();
         const { email, password } = event.target.elements;
         console.log(email.value, password.value);

         const siteUrl = clientConfig.serverUrl;

         const loginData = {
            email: email.value,
            password: password.value
        };

        axios.post( `${siteUrl}/api/users/login`, loginData )
                .then( res => {
                    setCurrentUser(res.data);
                    console.log(res.data);      
        });
     }



     if (currentUser) {
        return <Redirect to="/" />
      }

      else {
    return (

          <form onSubmit={handleLogin}>
              <input name="email" type="text" placeholder="E-Mail"></input>
              <input name="password" type="password" placeholder="**************"></input>
              <button type="submit">Login</button>                    
           </form>

    );
  }
};

export const Login=（）=>{
const[currentUser，setCurrentUser]=useContext（AuthContext）；
//登录
const handleLogin=（事件）=>{
event.preventDefault（）；
const{email，password}=event.target.elements；
console.log（email.value、password.value）；
const siteUrl=clientConfig.serverUrl；
常量逻辑数据={
email:email.value，
密码：password.value
};
post（`${siteUrl}/api/users/login`，loginda）
。然后（res=>{
setCurrentUser（res.data）；
console.log（res.data）；
});
}
如果（当前用户）{
返回
}
否则{
返回(
登录
);
}
};

App.js：

function App() {



  return (
    <AuthProvider>
       <Router>
          <Switch>
              <PrivateRoute exact path="/" component={Home} />
              <Route exact path="/login" component={Login} />
              <Route path="*" component={NotFound} />
          </Switch>
      </Router>
    </AuthProvider>

  );

}

export default App;

函数应用程序（）{
返回(
);
}
导出默认应用程序；

//私家路

import React, { useContext } from "react";
import { Route, Redirect } from "react-router-dom";
import { AuthContext } from "../context/auth";

export const PrivateRoute = ({ component: RouteComponent, ...rest }) => {
  const {currentUser} = useContext(AuthContext);
  return (
    <Route
      {...rest}
      render={routeProps =>
        !!currentUser ? (
          <RouteComponent {...routeProps} />
        ) : (
          <Redirect to={"/login"} />
        )
      }
    />
  );
};

import React，{useContext}来自“React”；
从“react router dom”导入{Route，Redirect}；
从“./context/auth”导入{AuthContext}；
导出常量PrivateRoute=（{component:RouteComponent，…rest}）=>{
const{currentUser}=useContext（AuthContext）；
返回(
！！当前用户(
) : (
)
}
/>
);
};

我错在哪里？谢谢任何想帮助我的人。

---

Marco.Italy

以下是您的代码的工作版本：

问题在于您在PrivateRoute上访问当前用户的方式。它返回为未定义的

const{currentUser}=useContext（AuthContext）

你不能像那样分解数组。所以我改为：

const[currentUser，setCurrentUser]=useContext（AuthContext）

注意：我知道您不需要
PrivateRoute
上的
setCurrentUser
。但这只是一种让它清晰运作的方式。您也可以这样做：

const[currentUser]=useContext（AuthContext）//这在获取第一个数组值时有效

privaterout.js

export const PrivateRoute = ({ component: RouteComponent, ...rest }) => {
  console.log("Rendering PrivateRoute...");
  const [currentUser, setCurrentUser] = useContext(AuthContext);     // <-------------
  console.log("currentUser: " + currentUser);
  return (
    <Route
      {...rest}
      render={routeProps =>
        !!currentUser ? (
          <RouteComponent {...routeProps} />
        ) : (
          <Redirect to={"/login"} />
        )
      }
    />
  );
};

export const PrivateRoute=（{component:RouteComponent，…rest}）=>{
log（“呈现PrivateRoute…”）；
const[currentUser，setCurrentUser]=useContext（AuthContext）；//
);
};
错误何时发生？按“提交”后？是的！当尝试axios.post（
${siteUrl}/api/users/login
，loginda）时。然后（res=>{setCurrentUser（res.data）；你能提供一个包含代码的代码沙盒吗？我发现了问题。请检查答案中的解决方案。感谢你的回答。没问题。有一件事可以帮助调试和理解呈现的内容，那就是添加一些
console.log（）
around。与我创建的每个组件一样，我立即在其中添加一行：
console.log（'Rendering ComponentX…）
在每个
useffect
上以及基本上在您认为有必要的任何地方都这样做。这就是我如何发现问题出在您的
privaterote
组件中的原因。然后我登录
currentUser
并看到它是
未定义的。
export const PrivateRoute = ({ component: RouteComponent, ...rest }) => {
  console.log("Rendering PrivateRoute...");
  const [currentUser, setCurrentUser] = useContext(AuthContext);     // <-------------
  console.log("currentUser: " + currentUser);
  return (
    <Route
      {...rest}
      render={routeProps =>
        !!currentUser ? (
          <RouteComponent {...routeProps} />
        ) : (
          <Redirect to={"/login"} />
        )
      }
    />
  );
};