【Ant Design】【List】

源码

javascript 复制代码
   <List
       style={{
          width: 600,
          height: 200,
          overflow: 'auto',
        }}
        header={
          <>
            <Typography.Text
              copyable={{
                text: file.response.join(',') || '',
              }}
            />
          </>
        }
        split={false}
        dataSource={file.response}
        renderItem={(item: any, index: number) => (
          <List.Item>
            <Typography.Text type="danger">{item}</Typography.Text>
          </List.Item>
        )}
      />

报错

Uncaught TypeError: Cannot read properties of null (reading 'key')

分析

第一反应是每个字项遍历出了问题

加上key,改为

复制代码
 <List.Item key={`${item}-${index}`}>
        <Typography.Text type="danger">{item}</Typography.Text>
   </List.Item>

依然报错,那就是原始数据有null,不支持了

将数据注入List组件时,再用String包一层,防止存在null

复制代码
 dataSource={file.response.map(String)}

这样就没问题了

相关推荐
未来之窗软件服务3 分钟前
自己写算法(九)网页数字动画函数——东方仙盟化神期
前端·javascript·算法·仙盟创梦ide·东方仙盟·东方仙盟算法
你的人类朋友38 分钟前
什么是断言?
前端·后端·安全
FIN66682 小时前
昂瑞微:实现精准突破,攻坚射频“卡脖子”难题
前端·人工智能·安全·前端框架·信息与通信
椎4952 小时前
苍穹外卖前端nginx错误之一解决
运维·前端·nginx
@。1242 小时前
对于灰度发布(金丝雀发布)的了解
开发语言·前端
我有一棵树2 小时前
前端图片加载失败、 img 出现裂图的原因全解析
前端
FIN66682 小时前
昂瑞微冲刺科创板:硬科技与资本市场的双向奔赴
前端·人工智能·科技·前端框架·智能
im_AMBER2 小时前
杂记 14
前端·笔记·学习·web
牧杉-惊蛰2 小时前
disable-devtool 网络安全 禁止打开控制台
前端·css·vue.js
C+ 安口木2 小时前
vue中监听window某个属性被添加或值的变化
前端·javascript·vue.js