React中怎么通过id删除对应的数组元素。

React 中怎么通过 id 删除对应的数组元素

1.此处有两个组件，父组件 App，子组件 ToDoList，通过子组件 ToDoList 中传过来的 id 删除父组件 App 中的数组元素。

1.1 父组件 App 有一个命名为 ToDoList 的数组，代码如下：

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

1.2 我们在父组件App中给子组件 ToDoList 传递一个方法，方法名为 listDelete 。同时也把父组件的数组 ToDoList 传过去

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

1.3 子组件中循环展示来自父组件的数组 ToDoList，并且让两个按钮取到对应的数组元素 id。

import React, { Component } from 'react'
import './ToDoList.css'

export default class ToDoList extends Component {

    render() {
        return (
            <div className='ToDoList'>
                <ul>
                    {
                        this.props.ToDoList.map((item)=>{
                        return <li key={item.id}>
                            {item.title}
                            <p>{item.completed?'已完成':'未完成'}</p>
                            <div>
                            //根据id改变父组件中ToDoList数组的数组元素的Completed的值
                            <button className='btn1' id={item.id} onClick={this.changeCompleted}>切换状态</button>
                            //根据id删除父组件中ToDoList数组的数组元素
                            <button className='btn2' 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.子组件的按钮触发父组件的事件 listDelete 并且从子组件带来了按钮对应数组元素的 id 值，用来删除对应的数组元素。

  //删除
  listDelete=(id)=>{
    //将id进行数据类型转换，强制转换为数字类型，方便下面进行判断。
    const id2=Number(id)
    //map遍历的数组元素是对象的话，会修改原数组的值，也就是会修改this.state的值，这之前建议深拷贝原数组再操作，个人浅见。
    //最简单的深拷贝(JSON.stringify() 和JSON.parse())
    //先把对象使用JSON.stringify()转为字符串，再赋值给另外一个变量，然后使用JSON.parse()转回来即可。
    //深拷贝
  	const ToDoList1 = JSON.parse( JSON.stringify([...this.state.ToDoList]))
    this.setState({
      //filter方法筛选数组，这里的意思是id与传过来的id2不一样的就留下，一样的就删除。
      ToDoList:ToDoList1.filter(item=>item.id !== id2)
    })
  }

2.1 这样就可以通过子组件传过来的 id 删除父组件中对应的数组元素。