React Props处理key值传递：点击列表项返回undefined的问题排查

问题原因 #

React 中的 key 是框架内部专用的保留属性，仅用于列表重渲染时的元素比对，不会作为普通 props 传递给自定义组件。同时你在渲染 ListItem 组件时，仅传入了key、number、time三个属性，没有显式传递index属性，因此组件内部读取props.index自然返回undefined。

修复方案 #

1. 给组件显式传递index属性 #

修改列表生成的循环代码，新增index属性传递：

for (var index in data) {
  i++;
  dataarray.push(<ListItem key={index} index={index} number={data[index]['number']} time={data[index]['time']} />)
}

修改后即可在ListItem内部正常获取props.index的值，点击事件的handleDel方法就能拿到正确的参数。

2. 可选优化建议 #

• JSX 中不能使用class属性定义样式类，需要替换为className，否则React会抛出属性不兼容的警告。
• 不推荐用for...in遍历数组生成列表，更建议使用数组map方法简化代码：

const dataarray = data.map((item, index) => {
  return <ListItem key={index} index={index} number={item.number} time={item.time} />
})

• 确认返回模板中渲染的变量名和你存储列表元素的变量一致，你当前代码里循环生成的是dataarray，但模板里写的是{daten}，如果是笔误需要修正，否则列表不会正常渲染。

内容的提问来源于stack exchange，提问作者Björn F