1、列表渲染一定要注意key的唯一性,不然会导致页面只更新部分的bug

graphVertexConfigList.data.map((item, index) => {
return <VertexOrEdgeItem
key={item.schemaName}
type={type}
item={item}
index={index}
colorSchemeIndex={colorSchemeIndex}
colorFlag={colorFlag}
onToggleColorFlag={this.handleToggleColorFlag.bind(this)}
onBatchSetConfig={this.handleBatchSetConfig.bind(this)}
/>

比如这里key的值为表名,但是新的graphVertexConfigList也会有相同的表名,这样就会导致页面只更新包含新的表名的数据

react踩坑的更多相关文章

  1. 【React踩坑记一】React项目中禁用浏览器双击选中文字的功能

    常规项目,我们只需要给标签加一个onselectstart事件,return false就可以 例: <div onselectstart="return false;" & ...

  2. 【React踩坑记五】React项目中引入并使用react-ace代码编辑插件(自定义列表提示)

    最近有一个引入sql编辑器插件的需求,要求代码高亮显示,代码智能提示,以及支持自定义代码提示列表等功能.中途在自定义代码提示列表中由于没有相关demo,所以踩了一些坑,遂将其整理如下,以便日后查看. ...

  3. 新版react踩坑总结

    使用es6语法与原本es5语法几个有区别的地方 1.React.creatClass与React.Component var Component = React.createClass({ rende ...

  4. 航遇项目react踩坑

    1.iconfont应用: a.正常用法如下 <span className='iconfont' > iconfont的代码,例如: </span> b.react不能动态 ...

  5. React 踩坑记录

    1.React-router error: super expression must either be null or a function 原因:引入babel后写ES6风格的代码: class ...

  6. 【React踩坑记四】React项目中引入并使用js-xlsx上传插件(结合antdesign的上传组件)

    最近有一个前端上传并解析excel/csv表格数据的需求. 于是在github上找到一个14K star的前端解析插件 github传送门 官方也有,奈何实在太过于浅薄.于是做了以下整理,避免道友们少 ...

  7. 【React踩坑记三】React项目报错Can't perform a React state update on an unmounted component

    意思为:我们不能在组件销毁后设置state,防止出现内存泄漏的情况 分析出现问题的原因: 我这里在组件加载完成的钩子函数里调用了一个EventBus的异步方法,如果监听到异步方法,则会更新state中 ...

  8. 【React踩坑记二】react项目实现JS路由跳转

    这里使用的是4.31版本的react-router-dom "react-router-dom": "^4.3.1", 直接使用以下代码即可实现路由跳转 thi ...

  9. 【React踩坑记六】create-react-app创建的react项目通过iP地址访问(实现局域网内访问)

    同项目组的小伙伴想用自己的电脑访问我电脑上开发阶段的create-react-app创建的react项目. 试过了了各种内网穿透工具ngrok以及localtunnel等. 奈何打开效率实在太过于龟速 ...

  10. React踩坑笔记 —— React

    Webpack提供了自己的导入方式require.include,但同时也支持commonjs规范或AMD规范的require语法,而Node.js使用的就是common.js,ES6的语法Impor ...

随机推荐

  1. SetViewportOrgEx和SetWindowOrgEx

    在MM_TEXT映射模式下使用这两个函数. 对于 BOOL SetViewportOrgEx( HDC hdc, // 设备内容HANDLE int X, // 新Viewport的x坐标 int Y ...

  2. 别再说你不会ElasticSearch调优了,都给你整理好了

    ES 发布时带有的默认值,可为 ES 的开箱即用带来很好的体验.全文搜索.高亮.聚合.索引文档 等功能无需用户修改即可使用,当你更清楚的知道你想如何使用 ES 后,你可以作很多的优化以提高你的用例的性 ...

  3. go中整型的用法小结

    示例 // 整型的用法小结 // 注意: // 整型变量在使用时,遵循保小不保大的原则 // 尽量使用占用空间小的数据类型 package main import ( "fmt" ...

  4. 2018-2-13-win10-uwp-圆角按钮

    title author date CreateTime categories win10 uwp 圆角按钮 lindexi 2018-2-13 17:23:3 +0800 2018-2-13 17: ...

  5. shell内置命令getopts

  6. 【串线篇】面向切面编程AOP

    面向切面编程AOP 描述:将某段代码“动态”的切入到“指定方法”的“指定位置”进行运行的一种编程方式 (其底层就是Java的动态代理)spring对其做了简化书写 场景: 1).AOP加日志保存到数据 ...

  7. Ubuntu备份与恢复

    在使用Ubuntu之前,相信很多人都有过使用Windows系统的经历.如果你备份过Windows系统,那么你一定记忆犹新:首先需要找到一个备份工具(通常都是私有软件),然后重启电脑进入备份工具提供的软 ...

  8. Eur yml

    server: port: 6001 # 服务端口 eureka: instance: hostname: localhost # eureka服务端的实例名称 client: registerWit ...

  9. shell 以指定字符拆分字符串

    string="hell|ttt|sss|2222" OLD_IFS="$IFS" IFS="|" array=($string) IFS= ...

  10. 【Bootstrapt】offset、push、pull

    实现方式的区别: col-md-offset-*,是利用margin-left实现的,col-md-push-*/col-md-pull-*是利用相对定位实现的. 效果的区别: col-md-offs ...