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的描述