#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.项目名的规范
必须要是小写的,不能有大写字母,否则报错