【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)}

这样就没问题了

相关推荐
Nan_Shu_6141 天前
Web前端面试题(2)
前端
知识分享小能手1 天前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队1 天前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
孩子 你要相信光1 天前
css之一个元素可以同时应用多个动画效果
前端·css
huangql5201 天前
npm 发布流程——从创建组件到发布到 npm 仓库
前端·npm·node.js
Days20501 天前
LeaferJS好用的 Canvas 引擎
前端·开源
小白菜学前端1 天前
vue2 常用内置指令总结
前端·vue.js
林_深时见鹿1 天前
Vue + ElementPlus 自定义指令控制输入框只可以输入数字
前端·javascript·vue.js
椒盐螺丝钉1 天前
Vue组件化开发介绍
前端·javascript·vue.js
koooo~1 天前
v-model与-sync的演变和融合
前端·javascript·vue.js