资讯专栏INFORMATION COLUMN

React 爬坑—key的关键之处

caikeal / 3214人阅读

摘要:爬坑之旅非列表下,的使用根据布尔值显示不同的页面,有相同的操作用户名下级页面看着写上级页面如果按照上面的代码书写会出现下面的状况数据被通用了,因为无法区分更新解决方式是添加主键请输入用户名下级页面看着写上级页面

React 爬坑之旅 非列表下,key的使用

根据布尔值显示不同的页面,有相同的操作

// demo
  handleChangeDemo1 (e) {
    let name = e.target.value;
    this.setState({name})
  }
  handleChangeDemo2 (e) { 
    let name = e.target.value;
    this.setState({name})
  }
  handleClickDemo1 () {
    this.setState({flag: !this.state.flag})
  }
  handleClickDemo2 () {
    this.setState({flag: !this.state.flag})
  }
 {
    flag ?  
      
:
}
如果按照上面的代码书写会出现下面的状况

数据被通用了,因为react无法区分更新

解决方式是添加主键

key

{
   flag ?  
     
:
}

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/88333.html

相关文章

  • React-Native爬坑之旅

    摘要:爬坑之旅第一站安装官网安装或我云盘分享官网安装安装或我云盘分享注以下教程只针对平台和的安装比较简单,由于需要配置环境变量故会稍显麻烦列出几篇我安装时的参考文档中文网环境搭建教程以及晴明老师在腾讯课堂的视频教程,以及环境下的环境配置此外我安装 1.Flag 爬坑之旅第一站——安装 jdk官网安装或我云盘分享 Node.js 官网安装 Android Studio 安装或 我云盘分享 ...

    wangbjun 评论0 收藏0
  • 4、React组件之性能优化

    摘要:组件的性能优化高德纳我们应该忘记忽略很小的性能优化,可以说的情况下,过早的优化是万恶之源,而我们应该关心对性能影响最关键的另外的代码。对多个组件的性能优化当一个组件被装载更新和卸载时,组件的一序列生命周期函数会被调用。 React组件的性能优化 高德纳: 我们应该忘记忽略很小的性能优化,可以说97%的情况下,过早的优化是万恶之源,而我们应该关心对性能影响最关键的另外3%的代码。...

    陈伟 评论0 收藏0
  • 支付宝小程序爬坑之路【1】

    摘要:文件名字支付宝页面标题导航栏背景色是否允许下拉刷新默认页面是否支持纵向拽拉超出实际内容。请求数据请求支付宝的请求是如果需要设置支付宝为微信是参数不同如果是请求,需要给的值加上最终为 ①支付宝创建个人身份 【假如想要变成公司项目的 小程序管理员,千万千万不要变成==自研开发者==】 会设置不了的 ②支付宝的缓存机制 setStorageSync 【设置本地存储】 my.setStor...

    Harpsichord1207 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<