React的数组遍历渲染出来

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

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

  1. constructor(props) {
  2.         super(props)
  3.         this.state={
  4.             arr: [1, 2, 3, 4]
  5.         }
  6.     }
  7.    addItim =()=>{
  8.        this.setState(()=>{//将数字push到原来的数组中
  9.            this.state.arr.push(66)
  10.            //直接返回出来
  11.            return{
  12.                arr:this.state.arr
  13.            }
  14.        })
  15.    }
  16.     render() {
  17.         const { arr } = this.state//解构赋值
  18.         return (
  19.             <div>
  20.                 <button onClick={this.addItim}>加数字</button>
  21.                 <ul>
  22.                     {/* {arr.map(item => <li>{item}</li>)} */}
  23.                     {/* 循环遍历上面的数组 放在li里面 */}
  24.                     {arr.map((item,index) => <li key={index}>{item}</li>)}
  27.                 </ul>
  28.             </div>
  29.         )
  30.     }
  31. }
  32. export default traversal

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

发表评论

表情：
评论列表 （有 0 条评论，29人围观）

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

相关阅读