So ändern Sie ein Element in einem Array in React

So ändern Sie ein Element im Array in React: 1. Zeigen Sie die übergeordnete Komponente App und die untergeordnete Komponente ToDoList an. 2. Durchlaufen Sie die untergeordnete Komponente, um das Array ToDoList aus der übergeordneten Komponente anzuzeigen, und lassen Sie die beiden Schaltflächen das abrufen entsprechende Array-Element-ID ;3. Ändern Sie den vollständigen Wert des entsprechenden Array-Elements über die von der Unterkomponente übergebene ID.

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

Wie ändere ich ein Element in einem Array in React? Wie ändere ich das entsprechende Array-Element über die ID?

React ändert das entsprechende Array-Element über die ID:

1 Hier gibt es zwei Komponenten, die übergeordnete Komponente App und die untergeordnete Komponente ToDoList sowie die von der untergeordneten Komponente übergebene ID -component ToDoList wird der Inhalt der Array-Elemente in der übergeordneten Komponente App geändert.

1.1 Die übergeordnete Komponente App hat ein Array namens ToDoList und der Code lautet wie folgt:

  this.state = {
       ToDoList:[
         {
           id:1,
           title:'吃饭',
           completed:true
         },
         {
          id:2,
          title:'睡觉',
          completed:false
        },
        {
          id:3,
          title:'学习',
          completed:true
        }
       ]
    }

1.2 Wir übergeben eine Methode in der übergeordneten Komponente App an die Unterkomponente ToDoList und die Methode heißt changeCompleted. Gleichzeitig wird auch das Array ToDoList der übergeordneten Komponente übergeben.

    <ToDoList
       ToDoList={this.state.ToDoList} 
       changeTitle={this.changeCompleted}
   listDelete={this.listDelete}
       >
       </ToDoList>

1.3 Zeigen Sie das Array ToDoList aus der übergeordneten Komponente in einer Schleife in der untergeordneten Komponente an und lassen Sie die beiden Schaltflächen die entsprechende Array-Element-ID abrufen.

import React, { Component } from 'react'
import './ToDoList.css'
export default class ToDoList extends Component {
    render() {
        return (
            <div className=&#39;ToDoList&#39;>
                <ul>
                    {
                        this.props.ToDoList.map((item)=>{
                        return <li key={item.id}>
                            {item.title}
                            <p>{item.completed?&#39;已完成&#39;:&#39;未完成&#39;}</p>
                            <div>
                            //根据id改变父组件中ToDoList数组的数组元素的Completed的值
                            <button className=&#39;btn1&#39; id={item.id} onClick={this.changeCompleted}>切换状态</button>
                            //根据id删除父组件中ToDoList数组的数组元素
                            <button className=&#39;btn2&#39; id={item.id} onClick={this.listDelete}>删除</button>
                            </div>
                          </li>
                        })
                    }
                </ul>
              
            </div>
        )
    }
    listDelete=(e)=>{
        this.props.listDelete(e.target.id)
    }
    changeCompleted=(e)=>{
        this.props.changeCompleted(e.target.id)
    }
}

2. Die Schaltfläche der untergeordneten Komponente löst das Ereignis „changeCompleted“ der übergeordneten Komponente aus und holt den ID-Wert des der Schaltfläche entsprechenden Array-Elements aus der untergeordneten Komponente, der zum Ändern des abgeschlossenen Werts im entsprechenden ID-Array verwendet wird Element.

  changeCompleted=(id1)=>{
    // 传过来的id不是数字类型，这里进行强制转换，不然下面的if语句无法判断
    const id2=Number(id1)
    //map遍历的数组元素是对象的话，会修改原数组的值，也就是会修改this.state的值，这之前建议深拷贝原数组再操作，个人浅见。
    //最简单的深拷贝(JSON.stringify() 和JSON.parse())
    //先把对象使用JSON.stringify()转为字符串，再赋值给另外一个变量，然后使用JSON.parse()转回来即可。
    //深拷贝
    const ToDoList1 = JSON.parse( JSON.stringify([...this.state.ToDoList]))
    this.setState({
      //将拷贝的数组展开每一项，对每一项的id和传过来的id2进行对比，如果和传过来的id相同，说明
      //找到了需要修改的哪一项，然后将那一项的completed取反即可。
      ToDoList:ToDoList1.map((item)=>{
        if(item.id===id2){
          item.completed = !item.completed
        }
        //id不同就直接返回原来的值不修改，无论修改与否的的值都在这里返回
        return item
      })
    })
  }

2.1 Hier wird der vollständige Wert des entsprechenden Array-Elements erfolgreich über die von der Unterkomponente übergebene ID geändert, sodass er zwischen wahr und falsch umgeschaltet werden kann.

Empfohlenes Lernen: „Video-Tutorial reagieren“

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