您现在的位置是:网站首页> 编程资料编程资料

react如何向数组中追加值_React_

2023-05-24 452人已围观

简介 react如何向数组中追加值_React_

react向数组中追加值

首先,渲染一个随机数,每个一秒变换一次,效果如下:

代码如下:

数组追加元素

注意:组件更新有两种方式props或state的改变,而改变state一般是通过setState()方法来的,只有当state或props改变,render()方法才能再次调用,即组件更新

将生成的随机数放入一个数组,效果如下:

代码如下:

数组追加元素

使用...this.state.arr将arr解构出来,在将随机数加进去

注意:不能使用 arr : this.state.arr.push(Math.random()),不能使用在原数组的基础上修改的方法,例如push之类,可以使用concat方法或者ES6数组拓展语法

react处理数组的值

1. 追加数组的值

通过…运算符把数组之前的值拆分,再在后面追加值

this.state = {   arr: [] } add(){   this.setState((prevSatet) => ({     arr: [...prevSatet.arr, [追加的值] ]   })) }

2. 删除下标为index的值

把state中arr的值拷贝到新的arr中,删除新arr下标为index的值后,再重新赋值回arr

主要不要直接删除state中arr的值,然后赋值回去,这样违反immutable的规则

this.state = {   arr: [] } delete(index){    this.setState((prevState) => {     const arr = [...prevState.list]     arr.splice(index, 1)     return { arr }   }) }

以上为个人经验,希望能给大家一个参考,也希望大家多多支持。

-六神源码网