React中Axios获取用户信息传递给子组件时出现undefined问题

问题场景 #

在React项目中，通过axiosInstance调用后端/get-user接口获取用户信息，Home组件维护userInfo状态并传递给Navbar子组件，但Navbar打印该props为undefined，且Home组件内所有调试用console.log均无输出。

后端Get User接口代码 #

app.get("/get-user", authenticateToken, async (req, res)=>{
    const {user} = req.user;
    const isUser = await User.findOne({_id: user._id, });
    if(!isUser){
        return res.sendStatus(401);
    }
    return res.status(200).json({user: {fullName: isUser.fullName, email: isUser.email, _id: isUser._id, createdOn: isUser.createdOn}, message: ""})
})

Home组件代码 #

import React, { useEffect, useState } from "react";
import Navbar from "../../components/Navbar/Navbar";
import NoteCard from "../../components/Cards/NoteCard";
import { MdAdd } from "react-icons/md";
import AddEditNotes from "./AddEditNotes";
import Modal from "react-modal";
import axiosInstance from "../../utils/axiosInstance";
import { useNavigate } from "react-router-dom";

const Home = () => {
  const [openAddEditModal, setOpenAddEditModal] = useState({
    isShown: false,
    type: "add",
    data: null,
  });

  const navigate = useNavigate();

  const [userInfo, setUserInfo] = useState(null);
  const [loading, setLoading] = useState(true);
  const getUserInfo = async () => {
    console.log("getUserInfo function called");
    try {
      const response = await axiosInstance.get("/get-user");
      console.log("API Response: ", response);
      if (response.data && response.data.user) {
        setUserInfo(response.data.user);
        console.log("User info set:", response.data.user);
      }
    } catch (error) {
      console.error("Error fetching user info:", error);
      if (error.response.status === 401) {
        localStorage.clear();
        navigate("/login");
      }
    } finally {
      setLoading(false);
      console.log("Loading state set to false");
    }
  };
  useEffect(() => {
    console.log("useEffect triggered");
    getUserInfo();
    return () => {};
  }, []);
  console.log("Rendering Home component with userInfo:", userInfo);
  if (loading) {
    // Show loading indicator while fetching data
    return <p>Loading...</p>;
  }
  return (
    <>
      {userInfo && <Navbar userInfo={userInfo} />}
      <div className="container mx-auto">
        <div className="grid grid-cols-3 gap-4 mt-8">
          <NoteCard
            title="AI/ML for Geodata Analysis class tomorrow"
            date="21st August"
            content="AI/ML for Geodata Analysis class tomorrow"
            tags="#meeting"
            isPinned={true}
            onEdit={() => {}}
            onDelete={() => {}}
            onPinNote={() => {}}
          />
        </div>
      </div>
      <button
        className="w-16 h-16 flex items-center justify-center rounded-full bg-blue-500 hover:bg-blue-600 absolute bottom-10 right-10"
        onClick={() => {
          setOpenAddEditModal({ isShown: true, type: "add", data: null });
        }}
      >
        <MdAdd className="text-[32px] text-white" />
      </button>
      <Modal
        isOpen={openAddEditModal.isShown}
        onRequestClose={() => {}}
        style={{
          overlay: { backgroundColor: "rgba(0,0,0,0.3)" },
        }}
        contentLabel=""
        className="w-[40%] max-h-3/4 bg-white rounded-md mx-auto mt-14 p-5"
      >
        <AddEditNotes
          type={openAddEditModal.type}
          noteData={openAddEditModal.data}
          onClose={() => {
            setOpenAddEditModal({ isShown: false, type: "add", data: null });
          }}
        />
      </Modal>
    </>
  );
};

export default Home;

axiosInstance配置代码 #

import axios from 'axios';
import { BASE_URL } from './constants';

const axiosInstance = axios.create({
    baseURL: BASE_URL,
    timeout: 10000,
    headers: {
        "content-type": "application/json"
    }
});

axiosInstance.interceptors.request.use(
    (config) => {
        const accessToken = localStorage.getItem("token");
        if(accessToken){
            config.headers.Authorization = `Bearer ${accessToken}`;
        }
        return config;  
    },
    (error) => {
        return Promise.reject(error);
    }
)

export default axiosInstance; 

原因排查及解决方法 #

1. Home组件未被正确渲染 #

若Home组件内所有console.log无输出，大概率是组件未被路由加载或被拦截：

• 检查路由配置：确认react-router-dom的路由规则中，Home组件是否映射到当前访问路径，比如：

  <Routes>
    <Route path="/home" element={<Home />} />
  </Routes>
  

• 检查权限拦截：若有全局路由守卫，确认是否允许用户访问Home组件，是否在进入前被跳转到其他页面（如Login）。

2. Loading状态卡住，始终返回Loading... #

Home组件初始loading: true，若getUserInfo的finally块未执行，loading会一直为true，仅渲染加载提示：

• 验证API连通性：用Postman直接调用/get-user接口，确认后端服务启动、BASE_URL正确。
• 检查请求拦截器：确认localStorage.getItem("token")能获取有效token，请求头是否正确添加Authorization: Bearer xxx。
• 排查跨域问题：若前后端域名/端口不同，后端需配置CORS，否则请求会被浏览器拦截，导致请求pending、finally块不触发。

3. Navbar接收props为undefined的间接原因 #

若Home组件未渲染Navbar或userInfo始终为null，则Navbar无法接收props：

• 检查API响应：在浏览器Network面板查看/get-user的响应内容，确认response.data.user存在且结构符合预期。
• 验证条件渲染：{userInfo && <Navbar userInfo={userInfo} />}仅在userInfo为真时渲染Navbar，若接口返回异常，userInfo会保持null，Navbar不会渲染。

4. 其他潜在问题 #

• 检查浏览器控制台过滤：确认未开启仅显示Errors/Warnings的过滤选项，避免console.log被隐藏。
• 临时关闭React Strict Mode：Strict Mode会导致useEffect执行两次，但不会完全隐藏日志，可关闭测试是否有影响。

内容的提问来源于stack exchange，提问作者satyanand shreyash