react的踩坑记录（持续补充）

#react的踩坑记录

1.渲染的死循环问题:

解决方法：通过匿名箭头函数即可解决，这样在render渲染的时候，props或者states也不会发生改变。

问题代码：

render: (text, student) => (
	 <span>
		 <button onClick={this.editStudentDetail()} >编辑</button>
		 <Divider type="vertical" />
		 <button onClick={this.deleteStudent(student.id)} >删除</button>
	 </span>
	),

正确代码：

render: (text, student) => (
	    <span>
		     <button onClick={()=>this.editStudentDetail()} >编辑</button>
		     <Divider type="vertical" />
		     <button onClick={()=>this.deleteStudent(student.id)} >删除</button>
	    </span>
	 ),

2.antd使用Table报错

报错：
Warning: Each record in table should have a unique key prop,or set rowKey to an unique primary key.

解决：

<Table columns={columns} dataSource={data.results} **rowKey='id'** />

3.模态框的实现
①在项目中添加antd,在css中导入antd的css样式

yarn add antd

@import '~antd/dist/antd.css';

导入样式注意配置按需导入，具体配置看antd官网添加链接描述

4.DatePicker组件的时间格式问题
问题：通过DatePicker组件获取到的时间默认是GMT标准的，即获取到的是格林威治时间，数据库时间类型是datetime，因此在插入数据时会报sql时间错误问题

解决：在handleOk()中把日期格式化一下在提交到后台里

values['durationStart'+'Str'] = values['durationStart'].format('YYYY-MM-DD');
values['durationStart'] = values['durationStart'].format('YYYY-MM-DD HH:mm:ss');
values['durationEnd'+'Str'] = values['durationEnd'].format('YYYY-MM-DD');
values['durationEnd'] = values['durationEnd'].format('YYYY-MM-DD HH:mm:ss');

5.create-react-app不是内部或外部命令
暂时没找到问题所在，创建项目用一下命令代替

npx create-react-app projectname

6.项目名的规范
必须要是小写的，不能有大写字母，否则报错