How to change an element in an array in react

How to change an element in the array in react: 1. View the parent component App and the child component ToDoList; 2. Loop through the child component to display the array ToDoList from the parent component, and let the two buttons get the corresponding The array element id; 3. Modify the completed value of the corresponding array element through the id passed from the subcomponent.

The operating environment of this tutorial: Windows 10 system, react18.0.0 version, Dell G3 computer.

How to change an element in an array in react? How to change the corresponding array element by id?

React Change the corresponding array element by id:

1. There are two components here, the parent component App and the child component ToDoList, Change the content of the array element in the parent component App through the id passed in the child component ToDoList.

1.1 The parent component App has an array named ToDoList. The code is as follows:

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

1.2 We pass a method in the parent component App to the sub-component ToDoList, and the method name is changeCompleted. At the same time, the array ToDoList of the parent component is also passed.

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

1.3 Display the array ToDoList from the parent component in a loop in the child component, and let the two buttons get the corresponding array element id.

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. The button of the child component triggers the event changeCompleted of the parent component and brings the id value of the array element corresponding to the button from the child component, which is used to change the completed value in the corresponding id array 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 Here, the completed value of the corresponding array element is successfully modified through the id passed by the subcomponent, so that it can be switched between true and false.

Recommended learning: "react video tutorial"

The above is the detailed content of How to change an element in an array in react. For more information, please follow other related articles on the PHP Chinese website!