React的数组遍历渲染出来

谁借莪１个温暖的怀抱￠ 2023-06-08 10:46 7阅读 0赞

React的数组遍历渲染出来 和push进数组的案例

constructor(props) {
            super(props)
            this.state={
                arr: [1, 2, 3, 4]
            }
        }
       addItim =()=>{
           this.setState(()=>{//将数字push到原来的数组中
               this.state.arr.push(66)
               //直接返回出来
               return{
                   arr:this.state.arr
               }
           })
       }
        render() {
            const { arr } = this.state//解构赋值
            return (
                <div>
                    <button onClick={this.addItim}>加数字</button>
                    <ul>
                        {/* {arr.map(item => <li>{item}</li>)} */}
                        {/* 循环遍历上面的数组 放在li里面 */}
                        {arr.map((item,index) => <li key={index}>{item}</li>)}
    
    
                    </ul>
                </div>
            )
        }
    }
    export default traversal

上面的key不加的话会有下面的控制台报错![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY2MzI2NA_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY2MzI2NA_size_16_color_FFFFFF_t_70]: /images/20230531/300337f6038b41be98e68dafced7481f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，7人围观）

还没有评论，来说两句吧...

相关阅读

相关 React的数组遍历渲染出来

React的数组遍历渲染出来和push进数组的案例 constructor(props) { super(props)

谁借莪１个温暖的怀抱￠/ 2023年06月08日 10:46/ 0 赞/ 8 阅读

相关 react 渲染数组_了解如何在React中渲染数组

react 渲染数组介绍 (Introduction) This article will teach you how to render an array in R

忘是亡心i/ 2022年11月28日 15:25/ 0 赞/ 441 阅读

相关数组遍历VS对象遍历

数组遍历 const nameArray2 = ['zhao', 'qian', 'zhang', 'sun', 'li']; nameArray2.map(

拼搏现实的明天。/ 2022年10月15日 07:58/ 0 赞/ 374 阅读

相关 js数组遍历、对象遍历、字符串遍历

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] 数组遍历 for \--使用变量将数组长度缓

男娘i/ 2022年10月02日 00:49/ 0 赞/ 416 阅读

相关 java遍历之数组遍历,list遍历,set遍历,map遍历，stream遍历,Enumeration遍历

1.\_遍历方式其实遍历的就两种,对象和数组.只是哪个遍历适用于哪个而已 1. for 2. for增强 3. foreach 4. 迭代(Iterable)

迈不过友情╰/ 2022年09月11日 06:19/ 0 赞/ 476 阅读

相关 react中的map遍历

<ul id="ul_rwardList"> { this.state.reward.map(function (item) {

电玩女神/ 2022年07月15日 13:42/ 0 赞/ 342 阅读

相关定位遍历出来的元素

<c:forEach items="${sessionScope.cart.cartItem}" var="cartI"> <div class

快来打我*/ 2022年03月25日 11:44/ 0 赞/ 265 阅读

相关 react map遍历，react native map遍历

react map遍历（截取部分重要代码） {this.state.images.map((img, i) => { return (

红太狼/ 2022年03月01日 12:46/ 0 赞/ 379 阅读

相关 react 学习：React属性数组遍历、css引入

一：index.js 里直接引入css。 import React from 'react'; import ReactDOM from 'react-dom

野性酷女/ 2022年02月19日 02:01/ 0 赞/ 211 阅读

相关数组遍历。对象遍历。字符串遍历

数组遍历 for for(var i=0;i<arr.length;i++)\{ ...... \} forEach arr.forEach(

墨蓝/ 2021年11月29日 13:48/ 0 赞/ 701 阅读