首页 > 其他分享 >基础篇——四、列表和Keys

基础篇——四、列表和Keys

时间:2022-10-20 17:46:12浏览次数:54  
标签:userList Keys 渲染 基础 列表 item key id

四、列表和Keys

渲染列表数据是非常常见的场景,例如做一个展示用户的列表,需要根据获取的用户数据进行渲染列表。

class UserList extends Component {
    constructor() {
        this.state = {
            userList:[
                {
                    id: '23243',
                    info:{
                        name: 'sxww',
                        age: 26
                    }
                },
                {
                    id: '232434',
                    info:{
                        name: 'zzz',
                        age: 28
                    }
                },
            ]
        },
        this,handleClick = this.handleClick.bind(this); //es6class中,必须手动绑定方法this的指向
    }
    handleClick(id) {
        const userList = this.state.userList.map(item => {
            const newItem = item.id === id ? {...item,vote: ++item.vote} : item;
            return newItem;
        })
        this.setState({
            userList
        })
    }
    render() {
        return (
            <ul>
                {
                    this.state.userList.map(item =>
                        <User info={item.info} handleClick={this.handleClick} />
                    )
                }
            </ul>
        )
    }
}
export default UserList;

运行后控制台报错:

 

应该为列表每一项添加key(一般使用列表数据的id作为key),React用Key标记每个元素,当数据变化时,React可以通过key知道哪些元素发生变化,从而只渲染发生变化的元素,提高渲染效率。

<User info={item.info} handleClick={this.handleClick} key={item.id}/>

不推荐使用索引作为key,因为一旦列表中的数据发生重排,数据的索引也会改变,不利于react渲染。列表元素的key不能重复,但只限于当前列表,不是全局唯一

标签:userList,Keys,渲染,基础,列表,item,key,id
From: https://www.cnblogs.com/sxww-zyt/p/16810721.html

相关文章

  • 防火墙基础之BGP路由技术安全防护内网安全​
    防火墙基础之BGP路由技术安全防护内网安全​原理概述:​防火墙(英语:Firewall)技术是通过有机结合各类用于安全管理与筛选的软件和硬件设备,帮助计算机网络于其内、外网之间构建......
  • 【THM】-Post-Exploitation Basics(后渗透基础)-学习
    观前提示本文相关的TryHackMe实验房间链接:https://tryhackme.com/room/postexploit介绍本文主要涉及关于后渗透的基础知识,主要内容有:使用powerview和Bloodhound进行后......
  • Liunx网络基础知识(一)
    Liunx网络基础知识标签(空格分隔):Liunx基本命令和网络介绍OSI模型七层模型物理层【网卡】主要功能是完成相邻节点之间原始比特流的传输。物理层协议关心的典型问题是......
  • 零基础python 第六章
    实例1输出每日一贴(共享版)deffunction_tips():'''功能:每天输出一条励志文字'''importdatetimemot=["今天星期一:\n坚持下去不是因为我很坚强,而且因为......
  • 防火墙基础之总部与总部之间OSPF路由配置​
    防火墙基础之总部与总部之间OSPF路由配置​原理概述:​防火墙(英语:Firewall)技术是通过有机结合各类用于安全管理与筛选的软件和硬件设备,帮助计算机网络于其内、外网之间构建一......
  • 【考点15】第十四章: 程序设计基础
    【考点1】程序设计方法与风格形成良好的程序设计风格需注意:    1、源程序文档化;    2、数据说明的方法;    3、语句的结构;     4、输入和输出。  【考......
  • 【考点18】第十六章(上):数据库设计基础
    【考点1】数据库的基本概念数据(Data)是数据库存储的基本对象,是描述事物的符号记录。数据库(DB)是长期储存在计算机内、有组织的、可共享的大量数据的集合,它具有统一的结构形式......
  • 【算法】基础DP
    参考资料背包九讲一、线性DP如果现在在状态i下,它上一步可能的状态是什么。上一步不同的状态依赖于什么。根据上面的分析,分析出状态和转移方程。注意:dp不一定只有......
  • java反射之基础
    1.加载并获取该Class对象可以通过三种方式:1.1:Class.forName(类的全路径) Classcl=Class.forName("Demo1.GetClass");  1.2:实例对象.getClass()方法 ......
  • AcCoders 10477:【省选基础数据结构 树链剖分】【GDOI2016】疯狂动物城 题解
    算法:树链剖分,可持久化线段树。题目大意给定\(n\)个结点的一棵树,\(m\)次操作,操作有三种:将\(x\)至\(y\)最短路径上的所有点的权值加上\(delta\)。对于\(x\)至......