首页 > 其他分享 >React笔记-渲染列表Key(五)

React笔记-渲染列表Key(五)

时间:2023-05-09 21:14:11浏览次数:44  
标签:index name 渲染 age React item state Key infos

React学习笔记-渲染列表Key(五)

渲染列表需要添加key属性

import React from "react"

export default class LearnKey extends React.Component {

  state = {
    infos : [
      {name : 'Bob', age : 18},
      {name : 'kitty', age : 20},
      {name : 'sam', age : 22}
    ]
  }
  addTom() {
    this.setState({
      infos : [
        ...this.state.infos,
        {name : 'tom', age : 24}
      ]
    }
    )
  }
  del(index) {
    this.state.infos.splice(index, 1);
    this.setState({infos : this.state.infos});
  }

  render () {
    return (
      <div>
        key可以用来追踪列表里的元素哪些被修改了 需要保证key的唯一性 同层key不能重复
        <button onClick={() => this.addTom()}>添加 tom</button>
        <div>{this.state.infos.map((item, index) => (
          // 直接使用index作为key值 一旦修改某一项导致index变动 导致所有index变化的标签都会重新渲染(key改变组件会重新渲染)
          <div key={index}>
            {'name -->' + item.name + ', age -->' + item.age}
            <button onClick={() => this.del(index)}>删除</button>
          </div>
        ))}</div>

        <button onClick={() => this.addTom()}>添加 tom</button>
        <div>{this.state.infos.map((item, index) => (
          // 使用item.name不会因为删除某一项而被改变 其他标签不会重新渲染
          <div key={item.name}>
            {'name -->' + item.name + ', age -->' + item.age}
            <button onClick={() => this.del(index)}>删除</button>
          </div>
        ))}</div>
      </div>
    )
  }
}

使用index作为Key
使用index
使用item.name作为Key
使用不会改变key

标签:index,name,渲染,age,React,item,state,Key,infos
From: https://www.cnblogs.com/SpicyPeper/p/17386280.html

相关文章

  • React笔记-state(四)
    React学习笔记-state(四)概念state的主要作用是用于组件保存控制以及修改自己的状态它算是组件的私有属性不可通过外部访问和修改只能通过组件内部的this.setState来修改修改state属性会导致组件的重新渲染注意:如果直接通过this.state.xxx的方式修改,组件不会重新渲染,但......
  • Git 配置多个SSH-Key
    ​Git全局配置查看全局配置gitconfig--global--listgitconfig--globaluser.name删除全局配置gitconfig--global--unsetuser.name1.生成sshpublickeyandprivatekeyopengitbase,执行以下command,其中是keyname自己填;codeup_id_rsa也自己填,是key文件名......
  • ReactHub:我用 ChatGPT 搞了一个 React 的资源导航网站,谁有我用心啊!
    大家好,我是DOM哥。图谱年年有,今年我来盘!之前已经盘完了Vue的技术图谱,今天来盘React的。我用ChatGPT开发了一个React的资源导航网站。不管你是资深React用户,还是刚入门想学习React的小白,这个网站都能帮助到你。网站地址:https://dombro.site/react#/react项目托管......
  • 专访惠众科技|元宇宙应用如何借助3DCAT实时云渲染实现流畅大并发呈现?
    当前互联网流量红利已经逐渐消失,营销同质化愈发严重。在这样的背景下,催生了以元宇宙为焦点的虚拟产业经济。元宇宙在各行各业中以不同形式快速萌生、成长,呈现出多元化的应用场景。尤其是众多品牌,将元宇宙视为品牌建设与营销新的战略要地,不遗余力希望在元宇宙的世界里找到新的增长......
  • react 杂记2
    大括号-JavaScript的“新世界”{变量}  {方法(param)}  {逻辑}   {逻辑+html}  {}里面还是可以应用变量 再用{}获取即可 函数(onClick),变量(movieName),插槽(children),都是作为props传递给子组件的 添加事件注意:传递的是一个函数 自定义事件: 以o......
  • React Native之React基础
    ReactNative的基础是React,是在web端非常流行的开源UI框架。要想掌握ReactNative,先了解React框架还是很有帮助的。主要理解三个概念:组件、状态和JSX。使用组件的方式描述UI 使用组件的方式描述UI在React中,所有的UI都是通过组件去描述和组织的。可以认为,Reac......
  • 设置键盘只能输入数字( phoneNumTextField.keyboardType = UIKeyboardTypeNumberPad;)
    //手机号码textFieldphoneNumTextField=[[UITextFieldalloc]initWithFrame:CGRectMake(0,0,[[UIScreenmainScreen]bounds].size.width,40)];UIView*phoneImage=[[UIViewalloc]initWithFrame:CGRectMake(0,0,40,40)];phoneImage.backgroundColor=[U......
  • Unity Shader Toggle KeywordEnum Enum 使用
    Shader"Unlit/Custom/Shader05"{Properties{_MainTex("MainTex",2D)="white"{}[Toggle]_INVERT("Invertcolor?",Float)=0//_INVERT必须是大写的_Invert不可以[KeywordEnum(None,Add,M......
  • Git配置SSH Key
     最近看到很多人在配置Git时,遇到很问题,网上教程千篇一律。这儿自己单独记录一份。Git配置SSHKey1.检查本机是否有sshkey设置,切换到.ssh目录$cd~/.ssh或cd.ssh2.配置git用户名和邮箱,配置多个用户时添加--add参数$gitconfig--global--adduser.na......
  • arduino 之 json 再测试(key是否存在)
    1.使用containsKey():Stringdo_back(Stringjson){StaticJsonDocument<200>sjdoc;deserializeJson(sjdoc,json);Stringval=sjdoc["hlf"].as<String>();Serial.print("val:");Serial.println(val);Serial.print("sjdoc.contai......