React API调用渲染报错致白屏，请求解决方案指导

核心问题分析 #

• 第一个报错：你只判断了response存在，但没校验response.entries是否为数组/存在，当response有值但entries是undefined时，调用.map()就会触发类型错误。
• 第二个报错：你改成直接对response调用.map()，但API返回的response是包含entries数组的对象，不是数组本身，自然没有map方法。

具体解决步骤 #

1. 初始化状态设为空数组
   组件里存API数据的状态变量，初始值设为空数组，避免未请求到数据时调用map报错：

   const [dataList, setDataList] = useState([]);
   

2. 请求数据时正确提取数组
   发起请求后，先校验响应结构，确保拿到entries数组再更新状态，同时处理请求失败的情况：

   useEffect(() => {
     fetch('你的API接口地址')
       .then(res => res.json())
       .then(response => {
         // 双重校验：response存在，且entries是数组
         if (response && Array.isArray(response.entries)) {
           setDataList(response.entries);
         } else {
           setDataList([]); // 数据不符合预期时设为空数组
         }
       })
       .catch(error => {
         console.log('API请求失败:', error);
         setDataList([]); // 请求失败也设为空数组，防止白屏
       });
   }, []);
   

3. 渲染时直接遍历状态数组
   因为状态已经是数组（初始或更新后都是），直接调用map渲染即可，记得加唯一key：

   return (
     <div className="container">
       {dataList.map(item => (
         <div key={item.id} className="item-card">
           {/* 替换成你要渲染的字段，比如item.title、item.content等 */}
           <h3>{item.title}</h3>
         </div>
       ))}
     </div>
   );
   

可选优化：添加加载状态 #

可以加个加载状态，避免请求未完成时页面空白，提升体验：

const [loading, setLoading] = useState(true);

// 在fetch的then和catch回调里都加上setLoading(false);

return (
  <div className="container">
    {loading ? <p>数据加载中...</p> : (
      dataList.map(item => (
        <div key={item.id} className="item-card">
          <h3>{item.title}</h3>
        </div>
      ))
    )}
  </div>
);

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