React中API数据渲染异常：explore数组显示不一致问题求助

问题现象 #

• 调用API获取数据并存入React State后，控制台打印res.data能看到包含explore数组的完整数据
• 展开控制台中的explore数组详情时，显示为空
• 将explore数组作为props传递给两个组件，其中一个组件能正常渲染列表，另一个无法显示数据

核心原因分析 #

1. 控制台引用快照特性：Chrome等浏览器的控制台打印引用类型（对象/数组）时，显示的是内存引用的快照。展开时会读取当前内存中的最新值，如果explore数组在打印后被异步操作修改（比如被其他逻辑清空、或是API返回的是惰性加载的Proxy对象），就会出现“打印时有数据，展开后为空”的现象。
2. 组件渲染差异：无法显示数据的组件（如Highlited）大概率存在以下问题：
   • props名称拼写错误（比如组件内部期望的是highlightedCoaches，但你传递的是highlitedCoaches）
   • 组件内部未处理空数组的边界情况
   • 依赖数组引用变化而非内容变化进行渲染
3. State初始化与竞态问题：marketPlace的初始值为undefined，虽有加载判断，但异步数据更新时可能存在竞态，导致组件读取到不稳定的状态。

解决方案 #

1. 打印真实数据快照 #

将console.log(res.data)改为打印序列化后的字符串，获取数据的真实快照，避免引用误导：

.then((res) => {
  console.log(JSON.stringify(res.data, null, 2));
  if (res.success) {
    return res.data;
  }
});

2. 确保State数据不可变 #

在存入State前对数据进行深拷贝，避免外部修改影响State中的值：

getInitialMarketPlaceData(user.username).then((data) => {
  // 深拷贝数据，隔离外部引用
  const immutableData = JSON.parse(JSON.stringify(data));
  setMarketPlace(immutableData);
});

3. 修正State初始值 #

给marketPlace设置合理的初始值，避免undefined导致的渲染异常：

const [marketPlace, setMarketPlace] = useState<any>({
  explore: [],
  favorites: [],
  opinions: []
});

4. 检查目标组件逻辑 #

• 核对Highlited组件的props名称是否与传递的一致（比如你代码中写的highlitedCoaches，组件内部是否正确接收这个props）
• 确保组件内部处理了空数组的情况，比如：

function Highlited({ highlitedCoaches }) {
  if (!highlitedCoaches || highlitedCoaches.length === 0) {
    return <div>No coaches found</div>;
  }
  return (
    <div>
      {highlitedCoaches.map(coach => (
        <div key={coach.id}>{coach.name}</div>
      ))}
    </div>
  );
}

代码修正示例 #

修改后的Fetch函数 #

const baseUrl = process.env.BASE_API_URL;
import { marketPlace } from "./mock";
import { requestOptions } from "utils/auxiliaryFunctions";

const getInitialMarketPlaceData = async (username: string) => {
  try {
    return await fetch(
      `${baseUrl}marketplace/home/${username}`,
      requestOptions()
    )
      .then((data) => data.json())
      .then((res) => {
        // 打印真实数据快照
        console.log(JSON.stringify(res.data, null, 2));
        if (res.success) {
          // 返回深拷贝后的数据
          return JSON.parse(JSON.stringify(res.data));
        }
      });
  } catch (err) {
    throw err;
  }
};

修改后的Marketplace组件 #

export default function Marketplace() {
  // 初始化State为包含空数组的对象，避免undefined问题
  const [marketPlace, setMarketPlace] = useState<any>({
    explore: [],
    favorites: [],
    opinions: []
  });
  const [coachData, setCoachData] = useState<false | any>();
  const [coach, setCoach] = useState<string>();

  const { user } = useContext(AuthContext);

  useEffect(() => {
    getInitialMarketPlaceData(user.username).then((data) => {
      console.log("data", JSON.stringify(data, null, 2));
      setMarketPlace(data);
    });
  }, [user.username]); // 添加user.username作为依赖，避免竞态

  useEffect(() => {
    console.log("marketplace", JSON.stringify(marketPlace, null, 2));
  }, [marketPlace]);

  useEffect(() => {
    console.log("coachData", coachData);
  }, [coachData]);

  const changeCoachData = async (coach: string) => {
    setCoach(coach);
    let res = await getCoachProfile(coach);
    setCoachData(res);
  };

  if (!marketPlace || marketPlace.explore === undefined) {
    return <AppLoader />;
  }

  return (
    <main className={styles.marketplace}>
      <Highlited
        highlitedCoaches={marketPlace.explore}
      ></Highlited>
      {marketPlace.favorites.length !== 0 && (
        <Favorites
          changeCoachData={changeCoachData}
          favCoaches={marketPlace.favorites}
        ></Favorites>
      )}
      <Explore
        changeCoachData={changeCoachData}
        exploreCoaches={marketPlace.explore}
      ></Explore>
      {coachData && (
        <CoachProfileRookieView
          coachData={coachData}
          coachUsername={coach}
          isCoach={false}
          isPreview={false}
          onClose={() => setCoachData(false)}
        />
      )}
    </main>
  );
}

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