Comment modifier les valeurs d'attribut dans React

Comment modifier les valeurs d'attribut dans React : 1. Ouvrez le fichier de code correspondant ; 2. Créez l'objet tableau ; 3. Passez " this.setState({todoList: todoList.map((item,key)=> key == 0?{...item,name: "Jony"}:item)});" La méthode peut modifier une certaine valeur d'attribut dans l'objet tableau.

L'environnement d'exploitation de ce tutoriel : système Windows 10, React version 18.0.0, ordinateur Dell G3.

Comment modifier les valeurs d'attribut dans React ?

React modifie une certaine valeur d'attribut dans l'objet tableau

Généralement, nous traiterons les données dans le contrôleur et les donnerons à la couche View pour les afficher. Cette méthode d'affectation simple est la suivante

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

La mise en œuvre de. Vue est la suivante

this.todoList = response.data;

Par exemple, ce sont les données qui nous sont transmises en arrière-plan.

Comment devrions-nous changer la valeur de l'un des attributs « nom » de l'objet tableau ?

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

Voyons d'abord comment l'implémenter dans vue

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

Wow~ C'est en fait relativement simple, alors comment l'implémenter dans React ?

L'imagination est comme ça...

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

Ça ne marche pas, notre éditeur et notre navigateur signalent des erreurs, nous disant que nous ne pouvons pas écrire comme ça

Alors comment l'implémenter

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

Ceci est le site officiel Description de setState

Apprentissage recommandé : "Tutoriel vidéo React"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!