React-Django学习43-解决前端warning

前端代码完成，尽管功能没什么问题，但是打开console，可以看到一堆的warning。

我们就来解决这些warning。

先看第一个问题

<tr>不该放在<table>里面，应该放一个<tbody>标签。

修改Contacts组件

添加<thead><tbody>标签

接着我们处理第二个warning

Contacts需要有一个key attribute。

使用contact.id作为key

再次打开页面，只剩下两个warning了。

我们继续

还是key的问题，这个在ContactRow组件下面

使用map的index作为key

然后解决最后一个warning

原来是之前修改的时候没有把对象放到<td>标签里面

改回去就行

全部改完，总算console没有任何warning了。

完整源码：https://github.com/zhangyiant/mysite/tree/v43_20190412

上一节：React-Django学习42-组件移出

目录：

Django学习1-Django的安装

http://toutiao.com/item/6658608486957449731/

Django学习2-如何新建一个Django项目

http://toutiao.com/item/6661960000329482763/

Django学习3-添加一个Django App

http://toutiao.com/item/6662327930816823811/

Django学习4-Django数据库设置

http://toutiao.com/item/6663067257637175811/

Django学习5-Django新建model

http://toutiao.com/item/6663415449637618179/

Django学习6-Django访问model

http://toutiao.com/item/6663623388650537483/

Django学习7-Django Admin的使用

http://toutiao.com/item/6663981781852619278/

Django学习8-url分配

http://toutiao.com/item/6665643107716956680/

Django学习9-数据填入页面

http://toutiao.com/item/6666042928743318028/

Django学习10-给页面添加模板

http://toutiao.com/item/6666220166939935244/

Django学习11-给页面添加模板2

http://toutiao.com/item/6666761240657789453/

Django学习12-给主页面添加链接

http://toutiao.com/item/6667136892108014091/

Django学习13-给联系人页面添加链接

http://toutiao.com/item/6667477480032436747/

Django学习14-使用通用视图类

http://toutiao.com/item/6667852120546345480/

Django学习15-使用通用视图类2

http://toutiao.com/item/6668226696224702988/

Django学习16-安装REST framework

http://toutiao.com/item/6668619035917156867/

Django学习17-编写联系人表list API

http://toutiao.com/item/6668816772872798723/

Django学习18-nodejs安装

http://toutiao.com/item/6669171715236430344/

Django学习19-新建ReactJS项目

http://toutiao.com/item/6669722988981535240/

Django学习20-开发环境前后端集成

http://toutiao.com/item/6670124007242596868/

Django学习21-修改前端显示后端数据

http://toutiao.com/item/6670458618128630275/

Django学习22-添加单个通讯录信息API

http://toutiao.com/item/6670824439245963788/

Django学习23-添加电话号码到API

http://toutiao.com/item/6671199283061981710/

Django学习24-前端显示电话号码

http://toutiao.com/item/6671562709403697667/

Django学习25-添加电话号码管理界面

http://toutiao.com/item/6671800131928457740/

Django学习26-添加ReactJS路由模块

http://toutiao.com/item/6672316450306261518/

Django学习27-添加详细联系人页面

http://toutiao.com/item/6672679788680839687/

Django学习28-添加详细联系人链接

http://toutiao.com/item/6673082921852600835/

Django学习29-更新API URL

http://toutiao.com/item/6673468232348729867/

Django学习30-增加新建API

http://toutiao.com/item/6673807242640228868/

React-Django学习31-前端添加新建按钮

http://toutiao.com/item/6674189381688885763/

React-Django学习32-前端添加新建联系人输入框

http://toutiao.com/item/6674379889824498180/

React-Django学习33-调用新建联系人API

http://toutiao.com/item/6674946876380283403/

React-Django学习34-添加修改API

http://toutiao.com/item/6675288805320163844/

React-Django学习35-添加删除API

http://toutiao.com/item/6675652109041402380/

React-Django学习36-添加删除按钮

http://toutiao.com/item/6676025555537625614/

React-Django学习37-添加删除API

http://toutiao.com/item/6676390195106939399/

React-Django学习38-删除后刷新页面

http://toutiao.com/item/6676757804453200397/

React-Django学习39-添加修改按钮

http://toutiao.com/item/6676965007659368968/

React-Django学习40-响应修改按钮

http://toutiao.com/item/6677540908730155531/

React-Django学习41-调用修改API

http://toutiao.com/item/6677873536247267851/

React-Django学习42-组件移出

http://toutiao.com/item/6678280580611703304/