react如何修改属性值

这篇文章主要讲解了“react如何修改属性值”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“react如何修改属性值”吧！

创新互联公司是创新、创意、研发型一体的综合型网站建设公司，自成立以来公司不断探索创新，始终坚持为客户提供满意周到的服务，在本地打下了良好的口碑，在过去的十余年时间我们累计服务了上千家以及全国政企客户，如高空作业车租赁等企业单位，完善的项目管理流程，严格把控项目进度与质量监控加上过硬的技术实力获得客户的一致赞誉。

react修改属性值的方法：1、打开相应的代码文件；2、创建好数组对象；3、通过“ this.setState({todoList: todoList.map((item,key)=>key == 0?{...item,name: "Jony"}:item)});”方法修改数组对象中的某一个属性值即可。

React修改数组对象中的某一个属性值

一般我们会把Controller（控制器）里面的数据经过处理给到View（视图）层做显现,这种简单的赋值方式如下

this.setSate({ 
 toList: response.data 
})

Vue的实现如下

this.todoList = response.data;

比如这是后台传递给我们的数据，

我们想要更改数组对象的其中一项`name`属性值该如何实现呢？

 state = {//类似于Vue里面的data()
    todoList: [
      {
        img: "xxx",
        name: "小飞",
      },
      {
        img: "xxx",
        name: "小候",
      },
    ]
  };

我们先来看一下在vue中如何实现

this.todoList[0].name = "Jony";
//或者
this.$set(this.todoList[0],"name","Jony");

哇~其实比较简单，那么在React中如何实现呢？

想象中是这样的...

 this.setState({
      todoList[0].name:"Jony"
    })
    //这样报错了，立马想到另一种方式
   let obj = {
      img:"xxx",
      name:"Jony"
    }
    this.setState({
      todoList[0]:obj
    })

都是不行的，我们的编辑器和浏览器都在报错，告诉我们不能这么写

那么怎么来实现呢

//三目运算符 `key == 0` 是我写死的
//如果是点击传入的话可以是`key == index(下标)`
 const todoList = [...this.state.todoList];   //浅拷贝一下
  this.setState({
      todoList: todoList.map((item,key)=>key == 0?{...item,name: "Jony"}:item)
    });

这是官网针对 setState的描述

感谢各位的阅读，以上就是“react如何修改属性值”的内容了，经过本文的学习后，相信大家对react如何修改属性值这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！