解决React遍历每次渲染多个根元素导致无法为元素赋值key的问题

news/2024/7/15 17:12:47 标签: react.js, javascript, 前端

遍历时,存在多个根标签,如果使用<></>无法正确赋值key,代码如下:

function App() {
	const list = [
		{ id:1, name:"小明" },
		{ id:2, name:"小田" },
		{ id:3, name:"小王" }
	]
	const listContent = list.map(item => (
		<>
			<li>{item.name}</li>
			<li>-----------</li>
		</>
	))
	return (
		<ul>{listContent}</ul>
	)
}

使用Fragment可以解决

import { Fragment } from "react"

function App() {
	const list = [
		{ id:1, name:"小明" },
		{ id:2, name:"小田" },
		{ id:3, name:"小王" }
	]
	const listContent = list.map(item => (
		<Fragment key={item.id}>
			<li>{item.name}</li>
			<li>-----------</li>
		</Fragment>
	))
  
	return (
		<ul>{listContent}</ul>
	)
}

http://www.niftyadmin.cn/n/5188627.html

相关文章

温度、机械振动等对电子产品的影响

今天在《印制电路板设计技术》里看到下面一段话&#xff0c;感觉可以非常好的解释一个故障率很高的产品的问题。这个探头用在冷却塔里面&#xff0c;露天&#xff0c;温度很高&#xff0c;尤其是夏天的时候&#xff0c;会有热气直接吹在探头上面&#xff1b;里面的湿度还很高&a…

CTFhub-RCE-过滤目录分隔符 /

根据源代码信息可知&#xff0c;过滤掉了/ <?php $res FALSE; if (isset($_GET[ip]) && $_GET[ip]) { $ip $_GET[ip]; $m []; if (!preg_match_all("/\//", $ip, $m)) { $cmd "ping -c 4 {$ip}"; exec($cmd,…

系列五、GC垃圾回收【四大垃圾算法-复制算法】

一、堆的内存组成 二、复制算法 2.1、发生位置 复制算法主要发生在新生代&#xff0c;发生在新生代的垃圾回收也被叫做Minor GC。 2.2、 Minor GC的过程 复制>清空》交换 1、eden、from区中的对象复制到to区&#xff0c;年龄1 首先&#xff0c;当eden区满的时候会触发第一…

代码随想录 Day48 动态规划16 T647 回文子串 T516最长回文子序列

LeetCode T647 回文子串 题目链接:647. 回文子串 - 力扣&#xff08;LeetCode&#xff09; 题目思路: 我们仍然使用动规五部曲来分析题目 1.确定dp数组含义 这里dp数组表示从下标从i到j这段子串是不是回文子串,是就是true,不是就是false 2.确定dp数组的递推公式 举个例子 这里…

网络基础、网络模型、键入网址到网页显示,期间发生了什么?(小林coding版总结)

网络模型 TCP/IP 网络模型共有 4 层 应用层 传输层 网络层 网络接口层 应用层&#xff0c;负责向用户提供一组应用程序&#xff0c;比如 HTTP、DNS、FTP 等; 传输层&#xff0c;负责端到端的通信&#xff0c;比如 TCP、UDP 等&#xff1b; 网络层&#xff0c;负责网络包的封装、…

RT-DETR优化改进:轻量级Backbone改进 | VanillaNet极简神经网络模型 | 华为诺亚2023

🚀🚀🚀本文改进:一种极简的神经网络模型 VanillaNet,支持vanillanet_5, vanillanet_6, vanillanet_7, vanillanet_8, vanillanet_9, vanillanet_10, vanillanet_11等版本,相对于自带的rtdetr-l、rtdetr-x参数量如下: layersparametersgradientsvanillanet_5338277174…

【vue】下载导出excel

下载导出excel 首先使用的tdesign框架&#xff0c;要导出后端返回的数据流excel 遇见的问题 下载的文件&#xff0c;里边的内容是undefined 观察报错 一看就知道并不是后端的报错&#xff0c;后端不可能是undefined 在强烈的好奇心驱动下&#xff0c;看了下接口&#xff0…

学习Linux难么?要怎么学?

学习Linux难么&#xff1f;要怎么学&#xff1f;针对这两个问题&#xff0c;小编总结了几点建议&#xff0c;通过几点建议&#xff0c;希望你能收获更多。如下资料是关于 Linux操作系统的内容。 linux操作系统的基础知识是比较好学的&#xff0c;但是需要我们通过大量地练习来牢…