React修改数组对象的注意事项及说明
目录
- React修改数组对象问题
- React修改数组中某个参数值方法
React修改数组对象问题
react开发主张使用函数式编程，函数式编程有个重要的特性就是不可变性。
你无法更改数据，也不能更改。 如果要改变或更改数据，则必须复制数据副本来更改。
看个例子，就是Vue和React两个框架实现给数组添加一个元素。
vue
export default {
name: "home",
data() {
return {
testArr: ['苹果','香蕉']
};
},
created(){
this.testArr.push('橘子')
}
};
...
react
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
testArr: ['苹果','香蕉']
};
}
componentDidMount(){
this.setState({
testArr:[...this.state.testArr,'橘子']
})
}
render(){
return (
<React.Fragment>
<p>{this.state.testArr}</p>
</React.Fragment>
)
}
}
这里会发现两个框架有个细微差别，Vue是直接修改的原数组，而React是不修改原数组，而是创建了一份新的数组，再通过setState赋值。刚接触React的时候的确会觉得挺奇怪，感觉会无形增加代码复杂度。接下来看下为何React要如此设计。
React遵循函数式编程规范。在函数式编程中，不推荐直接修改原始数据。 如果要改变或更改数据，则必须复制数据副本来更改。所以，函数式编程中总是生成原始数据的转换副本，而不是直接更改原始数据。
这里是一些常见的React修改数组或者对象的例子，所有这些函数都不改变现有的数据，而是返回新的数组或对象。
删除数组中的指定元素
//删除testArr中的樱桃
...
constructor(props) {
super(props);
this.state = {
testArr: ['苹果','香蕉','橘子','樱桃','橙子']
};
}
componentDidMount(){
this.setState({
testArr:this.state.testArr.filter(res=>res!=='樱桃')
})
}
...
合并两个对象
...
constructor(props) {
super(props);
this.state = {
testObj1:{
chineseName:'橘子',
englishName:'orange'
},
testObj2:{
color:'yellow',
shape:'circle'
},
testObj:{}
};
}
componentDidMount() {
this.setState({
testObj: Object.assign(this.state.testObj1,this.state.testObj2)
})
}
...
修改多层级对象的值
//testObj的apple的color改成green
...
constructor(props) {
super(props);
this.state = {
testObj: {
banner: {
name: '香蕉',
color: 'yellow'
},
apple: {
name: '苹果',
color: 'red'
}
}
};
}
componentDidMount() {
this.setState({
testObj: {
...this.state.testObj,
apple:{
...this.state.testObj.apple,
color:'green'
}
}
})
}
...
React修改数组中某个参数值方法
const currentPageVideoList=[...this.state.currentPageVideoList];
this.setState({currentPageVideoList: currentPageVideoList.map((item, key)=>
key==index?{...item, coverImg: this.state.defaultImg}:item
)})
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
相关推荐
-
使用react的7个避坑案例小结
React是个很受欢迎的前端框架.今天我们探索下React开发者应该注意的七个点. 1. 组件臃肿 React开发者没有创建必要的足够多的组件化,其实这个问题不局限于React开发者,很多Vue开发者也是. 当然,我们现在讨论的是React 在React中,我们可以创建一个很多内容的组件,来执行我们的各种任务,但是最好是保证组件精简 -- 一个组件关联一个函数.这样不仅节约你的时间,而且能帮你很好地定位问题. 比如下面的TodoList组件: // ./components/TodoList.j
-
详解React setState数据更新机制
为什么使用setState 在React 的开发过程中,难免会与组件的state打交道.使用过React 的都知道,想要修改state中的值,必须使用内部提供的setState 方法.为什么不能直接使用赋值的方式修改state的值呢?我们就分析一下,先看一个demo. class Index extends React.Component { this.state = { count: 0 } onClick = () => { this.setState({ count: 10 }) } re
-
react事件对象无法获取offsetLeft,offsetTop,X,Y等元素问题及解决
目录 react事件对象无法获取offsetLeft,offsetTop,X,Y等元素 解决方法 获取offsetLeft,offsetTop值不准的原因 遇坑总结 react事件对象无法获取offsetLeft,offsetTop,X,Y等元素 react获取到的事件缺少了部分一些属性,和原生事件对象不同 如图: 解决方法 事件中使用: e.nativeEvent 这是一个比较坑的地方,应该是react的事件对象没有包含一些原生eventDom的属性. 获取offsetLeft,offsetT
-
React修改数组对象的注意事项及说明
目录 React修改数组对象问题 React修改数组中某个参数值方法 React修改数组对象问题 react开发主张使用函数式编程,函数式编程有个重要的特性就是不可变性. 你无法更改数据,也不能更改. 如果要改变或更改数据,则必须复制数据副本来更改. 看个例子,就是Vue和React两个框架实现给数组添加一个元素. vue export default { name: "home", data() { return { testA
-
react如何修改循环数组对象的数据
目录 修改循环数组对象的数据 问题描述 解决办法 案例说明 react使用循环并实现删除和修改 总结 修改循环数组对象的数据 问题描述 做一个消息评论列表,针对具体某一个消息,里面有“收藏”和“点赞”功能,但是发现直接修改对象的树形,无法改变视图,因此做了笔记,方便后续学习 解决办法 循环遍历所有的对象,然后修改对应的值,重新设置 数组对象 案例说明 import * as React from 'react'; import { Icon, Button, Input, Form, } fro
-
微信小程序使用setData修改数组中单个对象的方法分析
本文实例讲述了微信小程序使用setData修改数组中单个对象的方法.分享给大家供大家参考,具体如下: 微信小程序已经出来挺久的时间了,之前只是在文档上粗略的看了一下,最近稍得空闲,便利用微信小程序平台写一个练手的项目,顺便学习一下小程序开发,感觉大体跟前端开发基本类似,但是因为是在微信的平台上运行,具体还是要根据小程序的规则来编写代码的,其中还是有部分的内容跟前端中常见的有所不同,于是接下来的博客里,也会顺手记录微信小程序开发过程中的一些坑,帮助后来的小程序开发者少踩一些坑,当然我踩的坑大部分都
-
Vue响应式添加、修改数组和对象的值
有些时候,不得不想添加.修改数组和对象的值,但是直接添加.修改后又失去了getter.setter. 由于 JavaScript 的限制, Vue 不能检测以下变动的数组: 1. 利用索引直接设置一个项时,例如: vm.items[indexOfItem] = newValue 2. 修改数组的长度时,例如: vm.items.length = newLength 为了避免第一种情况,以下两种方式将达到像 vm.items[indexOfItem] = newValue 的效果, 同时也将触发状
-
php中array_unshift()修改数组key注意事项分析
本文实例分析了php中array_unshift()修改数组key注意事项.分享给大家供大家参考,具体如下: 众所周知,array_unshift()用来在数组的开头添加元素,但今天突然发现如果数组的键值是数字类型的(或能转成数字类型的),array_unshift()会修改所有键为数字的元素的Key,真是坑啊 实例: $a=array(111=>"dddddddddddd","112"=>array("one"=>"
-
javascript之Array 数组对象详解
1.创建Array对象方法: --->var arr = [element0, element1, ..., elementn];//简单的定义方法 复制代码 代码如下: var arr = [1,2,3] 此时可以知道 复制代码 代码如下: arr[0] == 1; arr[1] == 2; arr[2] == 3; --->new Array(); 复制代码 代码如下: var arr = new Array();//定义一个没有任何内容的数组对象,然后以下面的方式为其赋值 arr[0]
-
Js的Array数组对象详解
本文为大家分享了关于Js的Array数组对象的相关资料,供大家参考,具体内容如下 1. 介绍 1.1 说明 数组是值的有序集合.每个值叫做一个元素,而每个元素在数组中有一个位置,以数字表示,称为索引.JavaScript数组是无类型:数组元素可以是任意类型,并且同一个数组中的不同元素也可能有不同的类型. --<JavaScript权威指南(第六版)> 1.2 定义方式 var names = new Array("张三", "李四", "王五&
-
JavaScript中的Array 对象（数组对象）
1.创建Array对象方法: --->var arr = [1,2,3];//简单的定义方法 此时可以知道 arr[0] == 1; arr[1] == 2; arr[2] == 3; --->new Array(); var arr = new Array();//定义一个没有任何内容的数组对象,然后以下面的方式为其赋值 arr[0] = "arr0"; arr[1] = "arr1"; arr[2] = "arr2"; ---&
-
JavaScript中数组对象的那些自带方法介绍
/** * 本文纯粹是梳理一下目前W3C标准中Array对象的自带Method. * 全文没啥营养,不过最后性能测试的部分,倒是抛出了一些疑问. */ 赋值方法 (Mutator methods) 这些方法直接修改数组自身 pop 和 push Array.pop(); // 删除数组最后一个元素,返回被删除的元素 Array.push(element1, ..., elementN); // 在数组尾部插入1-N个元素,返回操作后数组的length 通过这 pop 和 push ,就能把数组模
-
解决Vue 通过下表修改数组,页面不渲染的问题
需要注意的是,Vue之所以能够监听Model状态的变化,是因为JavaScript语言本身提供了Proxy或者Object.observe()机制来监听对象状态的变化.但是,对于数组元素的赋值,却没有办法直接监听,因此,如果我们直接对数组元素赋值: vm.todos[0] = { name: 'New name', description: 'New description' }; 会导致Vue无法更新View. 正确的方法是不要对数组元素赋值,而是更新: vm.todos[0].name =