React映射API数据时触发Cannot convert undefined or null to object错误

调用返回6家店铺分类与子分类的API时，映射数据出现错误：Cannot convert undefined or null to object at Function.entries ()。尝试console.log(data)始终显示undefined，但浏览器开发者工具的网络面板能看到正常响应。

数据获取代码 #

function FetchedData() {
 const [data, setData] = useState();

 const getApiData = async () => {
  const response = await fetch(
  `https://api/admin_stats`      
 ).then((response) => response.json());
 
 setData(response);
};

useEffect(() => {
 getApiData();
// eslint-disable-next-line
}, []);

数据映射代码 #

<Section className='address-section first-secion' title="Loblaws" defaultExpanded="false">
                        {data ?
                          <>
                          <Section className='address-section first-secion' title="Baby" defaultExpanded="false">
                            {Object.entries(data?.loblaws).slice(0, 6).map(([key, val], i)  => (
                              <div className='OrderList-data-container-inner' key={i} >
                                <h2 className='OrderList-Cart'style={{fontWeight:'600'}}> {key}: <span style={{marginLeft:'30px', fontWeight:'500'}}>{val}</span> </h2>         
                              </div>
                            ))} 
                          </Section>
        : null}
 </Section>

API返回数据截图 #

问题原因及修复方案 #

1. 数据获取逻辑错误 #

你在async/await中混用了.then()，导致数据赋值逻辑出错。正确写法应避免混用两种异步处理方式，同时增加错误处理：

const getApiData = async () => {
  try {
    const response = await fetch(`https://api/admin_stats`);
    // 先校验响应状态
    if (!response.ok) throw new Error('请求失败');
    const jsonData = await response.json();
    setData(jsonData);
  } catch (err) {
    console.error('数据获取失败:', err);
  }
};

2. 初始状态与可选链完善 #

• 初始化useState时设置默认空对象，避免初始渲染时data为undefined：

  const [data, setData] = useState({});
  

• 映射数据时，确保data.loblaws存在再执行Object.entries，用空值合并运算符兜底：

  {Object.entries(data?.loblaws || {}).slice(0, 6).map(([key, val], i)  => (
    // 原有渲染代码
  ))}
  

3. 解决console.log(data)显示undefined的问题 #

组件初始渲染时data是未初始化的undefined，而getApiData是异步执行的，第一次渲染打印自然为空。可以监听data变化来查看最新值：

useEffect(() => {
  console.log('当前data:', data);
}, [data]);

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