1. API 可能会抛出错误，因此您的代码永远不会进入 then 块。您需要添加一个 catch 块并使用错误数据渲染一些 ui，或者将用户重定向到其他地方，或者显示一个烤面包机等...如果您想显示一个 ui，您可以向您的组件添加错误状态

2. 在 API 为您获取数据之前，您的 userInfo 为空，因此您无法访问例如 userInfo.first_name 。组件抛出渲染错误，因此 useEffect 永远没有机会运行，如果渲染成功完成，它将运行。按照下面的代码，我等待 userInfo 上有一些数据，然后才能访问它的任何键

3. 您还可以考虑向您的组件添加加载状态

    function User() {
   const[userInfo, setUserInfo] = useState(null);
   const {user, checkAuth} = useContext(UserContext);
   const [redirect, setRedirect] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState(false);
   
   const params = useParams();
   
   function logout() {
   axios.post('http://localhost:3030/logout', {}, {withCredentials: true})
   .then(() => {
   checkAuth().catch(() => setRedirect(true));
   });
   }
   
   useEffect(() => {
   function getUserInfo() {
   setIsLoading(true) axios.get('http://localhost:3030/users/'+params.id)
   .then(response => {
   setUserInfo(response.data);
   console.log('here'); //这永远不会显示在控制台中
   
   })
   .catch(err=>setError(err?.message))
   .finally(() =>setIsLoading(false))
   }
   getUserInfo();
   }, [params.id]);
   
   if (redirect) {
   return (<Navigate to={'/'} />);
   }
   if (isLoading) {
   return (<Loader />);
   }
   
   返回 (
   <main>
   <Container>
   <ContainerHeader>
   <StyledHeader>Profile</StyledHeader>
   {!!userInfo && !!user && parseInt(params.id) === user.id && (
   <LinksRow>
   <EditLinkBut​​ton to={'/profile'}><FontAwesomeIcon icon={faEdit} /> Edit</EditLinkBut​​ton>
   <Button onClick={() => logout()}><FontAwesomeIcon icon={faArrowRight} /> Logout</Button>
   </LinksRow>
   )}
   </ContainerHeader>
   {error && <Error error={error}/>
   {!error && Object.keys(userInfo).length>0 && ( <>
   <Img src={ProfileImg} alt=""/>
   <Name>{userInfo.first_name} {userInfo.last_name}</Name>
   <Role>{userInfo.role}</Role>
   <Role>{userInfo.sector}</Role>
   <Labels><FontAwesomeIcon icon={faEnvelope}/> {userInfo.email}</Labels>
   <Labels> <FontAwesomeIcon 图标={faLocationDot} /> {userInfo.location} </Labels>
   <Labels>
   <Links href={userInfo.link} target="_blank"> <FontAwesomeIcon 图标={faExternalLink} /> {userInfo.link}</Links>
   </Labels>
   <Labels> <FontAwesomeIcon 图标={faCoins} /> 100 CxCoins</Labels>
   <SecondHeader>统计信息</SecondHeader>
   <Labels> <FontAwesomeIcon 图标={faComment} /> 100 条评论</Labels>
   <Labels> <FontAwesomeIcon icon={faTicket} /> 100 张票</Labels>
   
   </>)
   }
   </Container>
   </main>
   
   );
   }
   
   导出默认用户
   

将 getUserInfo 方法移至 userEffect 钩子之外。然后它可能会起作用。