常量列表渲染出现白屏问题，求干净传递数据的解决方案

云上老周

2026-7-12

解决列表渲染白屏问题

白屏基本是渲染时抛出了未捕获的错误，比如数据结构不符合预期（listItem或item.listData不是数组），或是缺少React列表要求的key属性。试试下面的优化方案：

1. 兜底数据，避免空值报错

如果listItem可能是undefined/null，或者部分item没有listData字段，用可选链和默认空数组兜底，防止map调用在非数组上抛出错误：

<ul className='flex flex-col gap-2 font-bodyFont'>
  {
    listItem?.map(item => 
      item?.listData?.map((data, index) => (
        <li key={index}>{data}</li>
      )) || []
    ) || []
  }
</ul>

2. 给列表元素加唯一`key`

React要求列表元素必须有唯一key，这能避免渲染异常，也是性能优化的必要项。如果data本身是唯一值，直接用它当key；如果不是，结合父项标识和索引生成：

// 当data是唯一值时
<li key={data}>{data}</li>
// 当data不唯一时
<li key={`${item.id}-${index}`}>{data}</li>

3. 增加空状态提示

如果列表没有数据，显示友好提示，避免页面完全空白：

<ul className='flex flex-col gap-2 font-bodyFont'>
  {
    (listItem?.length && listItem.some(item => item?.listData?.length)) ?
      listItem?.map(item => 
        item?.listData?.map((data, index) => (
          <li key={`${item.id}-${index}`}>{data}</li>
        )) || []
      ) :
      <li>暂无数据</li>
  }
</ul>