Heim > Web-Frontend > Front-End-Fragen und Antworten > So ändern Sie Attributwerte in React

So ändern Sie Attributwerte in React

藏色散人
Freigeben: 2022-12-29 09:23:45
Original
2773 Leute haben es durchsucht

So ändern Sie Attributwerte in React: 1. Öffnen Sie die entsprechende Codedatei 2. Erstellen Sie das Array-Objekt 3. Übergeben Sie " this.setState({todoList: todoList.map((item,key)=> key == 0?{...item,name: "Jony"}:item)});"-Methode kann einen bestimmten Attributwert im Array-Objekt ändern.

So ändern Sie Attributwerte in React

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Reaktionsversion 18.0.0, Dell G3-Computer.

Wie ändere ich Attributwerte in React?

React ändert einen bestimmten Attributwert im Array-Objekt

Im Allgemeinen verarbeiten wir die Daten im Controller und senden sie zur Anzeige an die Ansichtsebene. Diese einfache Zuweisungsmethode lautet wie folgt:

this.setSate({ 
 toList: response.data 
})
Nach dem Login kopieren

Die Implementierung von Vue lautet wie folgt:

this.todoList = response.data;
Nach dem Login kopieren
: Dies sind beispielsweise die Daten, die uns im Hintergrund übergeben werden.

Wie sollten wir den Wert eines der „Name“-Attribute des Array-Objekts ändern?

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

Werfen wir zunächst einen Blick darauf, wie man es in Vue implementiert

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

Wow~ Eigentlich ist es relativ einfach, also wie implementiert man es in React?

Imagination ist so...

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

Es funktioniert nicht, unser Editor und Browser melden Fehler und sagen uns, dass wir so nicht schreiben können

So ändern Sie Attributwerte in React

Also, wie man es umsetzt

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

So ändern Sie Attributwerte in React

Empfohlenes Lernen: „

Video-Tutorial reagieren

Das obige ist der detaillierte Inhalt vonSo ändern Sie Attributwerte in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage