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

Question

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

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

Answer 1

慕仰8512861 2019-01-08 22:32:21

因为请求是异步的

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

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

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

• 提问者 慕婉清4583709 #1

  非常感谢！

Answer 2

慕的地4085751 2018-12-19 14:55:57

因为最后一页的数量少于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 #1

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