React中无法从Context API获取用户数据的问题求助

你的问题核心是Context作用域与状态管理位置错误：

1. 你在CardTemplate组件内部嵌套了UserProvider，导致每个卡片都拥有独立的Context实例，而UserProfile组件不在这个局部Provider的覆盖范围内，自然无法读取到数据。
2. 共享状态应该放在Context Provider的上层组件中，而非单个卡片组件内，这样所有需要共享数据的组件才能访问到同一个状态。

1. 重构UserContext，让Provider管理全局状态 #

修改UserContext.js，将状态逻辑移入Provider组件内部，确保全局只有一个共享状态：

import { createContext, useContext, useState } from "react";

// 初始化Context默认值
export const UserContext = createContext({
  currentUser: null,
  setCurrentUser: () => {}
});

export const useUser = () => {
  return useContext(UserContext);
};

// 封装Provider组件，内部管理全局状态
export const UserProvider = ({ children }) => {
  const [currentUser, setCurrentUser] = useState(null);

  return (
    <UserContext.Provider value={{ currentUser, setCurrentUser }}>
      {children}
    </UserContext.Provider>
  );
};

2. 在应用根组件包裹UserProvider #

在App.jsx（或你的路由根组件）中，用UserProvider包裹所有需要访问用户数据的组件：

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import { UserProvider } from "./context/UserContext";
import { CardTemplate } from "./components/CardTemplate";
import { UserProfile } from "./components/UserProfile";

function App() {
  return (
    <UserProvider>
      <Router>
        <Routes>
          <Route path="/" element={<CardTemplate />} />
          <Route path="/userprofile" element={<UserProfile />} />
        </Routes>
      </Router>
    </UserProvider>
  );
}

export default App;

3. 修改CardTemplate，移除内部Provider并使用全局Context #

删除CardTemplate里的局部UserProvider，直接通过useUser获取全局的状态修改方法：

import React, { useState } from "react";
import like from "../assets/like.png";
import liked from "../assets/liked.png";
import { Link } from "react-router-dom";
import { useUser } from "../context/UserContext";

import {
  Card,
  CardBody,
  CardFooter,
  Typography,
} from "@material-tailwind/react";

export const CardTemplate = ({ userId, tweet, likeCountPrev, img }) => {
  const { setCurrentUser } = useUser();
  const [likeCount, setLikeCount] = useState(likeCountPrev);
  const [isLike, setIsLike] = useState(false);

  const handelLike = (e) => {
    if (!isLike) {
      e.target.src = liked;
      setLikeCount(prev => prev + 1);
      setIsLike(true);
    } else {
      e.target.src = like;
      setLikeCount(prev => prev - 1);
      setIsLike(false);
    }
  };

  const handleUser = () => {
    // 将用户数据存入全局Context
    setCurrentUser({
      userId,
      bio: tweet,
      img,
    });
  };

  return (
    <div>
      <Card className="mt-6 w-80 m-5 ring-1 shadow-black ring-gray-400 min-h-fit">
        <CardBody>
          <Link to="/userprofile" onClick={handleUser}>
            <Typography variant="h5" color="blue-gray" className="mb-2 flex">
              <img
                src={img}
                alt="用户头像"
                className="rounded-full mr-2 ring-2 ring-black"
                width={30}
                height={30}
              />
              {userId}
            </Typography>
          </Link>
          <Typography>{tweet}</Typography>
        </CardBody>
        <CardFooter className="pt-0 flex">
          <img
            src={like}
            alt="点赞"
            onClick={handelLike}
            width={24}
            height={24}
          />
          <h3 className="pl-3">{likeCount}</h3>
        </CardFooter>
      </Card>
    </div>
  );
};

4. 修改UserProfile，处理空状态避免报错 #

添加空值判断，防止初始状态为null时出现undefined报错：

import React from "react";
import { useUser } from "../context/UserContext";

export const UserProfile = () => {
  const { currentUser } = useUser();

  // 若无用户数据，显示提示
  if (!currentUser) {
    return <div>请先选择一个用户</div>;
  }

  const { img, userId, bio } = currentUser;

  return (
    <div className="flex">
      <img src={img} alt="用户头像" className="rounded-full ring-4 ring-black m-4" />
      <div className="p-4 flex flex-col m-auto ">
        <ul className="flex flex-col items-start">
          <li className="mb-4">
            <h1 className="text-3xl font-sans font-bold">{userId}</h1>
          </li>
          <li className="mb-4">
            <p>Abhinav N B</p>
          </li>
          <li className="mb-4">
            <p className="text-start">{bio}</p>
          </li>
        </ul>
      </div>
    </div>
  );
};

• 将共享状态移至全局UserProvider中，确保所有组件共享同一状态实例
• 移除CardTemplate内部的局部UserProvider，消除作用域隔离问题
• 添加空值判断，避免UserProfile在无用户数据时崩溃
• 修正路由路径为绝对路径（/userprofile），避免嵌套路由异常

内容的提问来源于stack exchange，提问作者Abhinav NB