react怎么改變數組中的某個元素-全球熱頭條

this.state = {       ToDoList:[         {           id:1,           title:"吃飯",           completed:true         },         {          id:2,          title:"睡覺",          completed:false        },        {          id:3,          title:"學習",          completed:true        }       ]    }

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

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)    }}

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      })    })  }