为什么key值是undefined，而当前节点的文本内容却正常

来源：7-14 热门搜索换页功能实现

慕婉清4583709

2018-12-19

for(let i =(page*10);i<(page+1)*10;i++){
  pageList.push(
    <SearchInfoItem key={newList[i]}>{newList[i]}</SearchInfoItem>
  );
}

为什么后面那个newList却是有值的？

写回答

2回答

慕仰8512861

2019-01-08

已采纳

因为请求是异步的

界面第一次渲染的时候没数据，异步请求结束后界面又渲染了一次，所以代码其实是执行了两次

第一次没数据，10个item都是空的，所以key也是undefined

第二次异步请求回来了就有数据了

慕婉清4583709

非常感谢！

2019-01-14

共1条回复

慕的地4085751

2018-12-19

因为最后一页的数量少于10个加一下判断吧

if (newList.length) {

for (let i = (page - 1) * 10; i < page * 10 ; i++) {

if (i < newList.length) {

pageList.push(

<SearchInfoItem key={newList[i]}>{newList[i]}</SearchInfoItem>

)

}

慕婉清4583709

你没理解我的意思，我是指在视频中老师说在循环前在if判断newList是否为空，否则会造成key值是undefined。我的问题是为什么key值打印出来会是undefined，而{newList[i]}这个却显示正常。。。

2018-12-20

共1条回复

React零基础入门到实战，完成企业级项目简书网站开发

主流新技术 React-redux，React-router4，贯穿基础语法

5275 学习 · 2496 问题

相似问题

回答 3

回答 1

回答 2

回答 2

回答 2