React循环获取用户数据并渲染组件白屏问题排查

问题根源 #

你更新后的代码中，useEffect内遍历fav_list发起异步请求时，异步请求还未完成就执行了setUsers(tempUsersCollection)。fetch是异步操作，map循环会立即执行完毕，此时tempUsersCollection仍是空数组，导致users状态始终为空，页面自然没有内容。

修复步骤 #

1. 用Promise.all包裹所有fetch请求，确保所有数据获取完成后再更新状态
2. 修正数据提取路径：从控制台输出可见，返回的用户数据直接在res对象中，而非res.data.tour

修复后的完整代码 #

import React, { useState, useEffect } from 'react';
import InfluencerFavoritesCard from '../components/influencerFavoritesCard/InfluencerFavoritesCard';
import "./indexPages.css"
import "./favorites.css"

export function Favorites() {
  const [users, setUsers] = useState([]);
  const fav_list = ["cagritaner", "acunilicali", "neslihanatagul"];
  
  useEffect(() => {
    // 生成所有fetch请求的Promise数组
    const fetchPromises = fav_list.map(username => 
      fetch(`http://localhost:3001/api/users/${username}`)
        .then(res => res.json())
        // 直接返回用户对象（控制台显示res本身就是用户数据）
        .then(userData => userData)
    );

    // 等待所有请求完成后更新状态
    Promise.all(fetchPromises)
      .then(usersData => {
        setUsers(usersData);
      })
      .catch(err => {
        console.error('获取用户数据失败:', err);
      });
  }, []);

  return (
    <div className='favoritesMain'>
      <div className='favoritesTitle-div'>
        <h3 className="favoritesTitle">FAVORİLER</h3>
      </div>
      <div className='favoritesContainer-wrapper'>
        <div className='favoritesContainer'>
          {users.length === 0 ? (
            <div>加载中...</div>
          ) : (
            users.map((item, index) => (
              <InfluencerFavoritesCard
                infCard={item}
                key={`influencer-${item.username}-${index}`}
              />
            ))
          )}
        </div>  
      </div>
      <div className='favoritesFooter'></div>
    </div> 
  );
}

额外注意事项 #

• 确认InfluencerFavoritesCard中的字段匹配：控制台返回的用户数据包含username，需检查是否存在name和categories字段，若不存在需调整组件渲染逻辑或核对API返回结构
• 新增的加载状态提示可提升用户体验，避免页面长时间空白

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