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
)})

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

赞 (0)

相关推荐

  • 使用react的7个避坑案例小结

    React是个很受欢迎的前端框架.今天我们探索下React开发者应该注意的七个点. 1. 组件臃肿 React开发者没有创建必要的足够多的组件化,其实这个问题不局限于React开发者,很多Vue开发者也是. 当然,我们现在讨论的是React 在React中,我们可以创建一个很多内容的组件,来执行我们的各种任务,但是最好是保证组件精简 -- 一个组件关联一个函数.这样不仅节约你的时间,而且能帮你很好地定位问题. 比如下面的TodoList组件: // ./components/TodoList.j

  • 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 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修改数组对象的注意事项及说明

    目录 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响应式添加、修改数组和对象的值

    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 =

随机推荐