所属分类:web前端开发
react修改属性值的方法:1、打开相应的代码文件;2、创建好数组对象;3、通过“ this.setState({todoList: todoList.map((item,key)=>key == 0?{...item,name: "Jony"}:item)});”方法修改数组对象中的某一个属性值即可。
本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑。
react怎么修改属性值?
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怎么修改属性值的详细内容,更多请关注zzsucai.com其它相关文章!