react改變陣列中的某個元素的方法：1、查看父元件App和子元件ToDoList；2、在子元件中循環展示來自父元件的陣列ToDoList，並且讓兩個按鈕取到對應的陣列元素id；3、透過子元件傳過來的id修改對應陣列元素的completed值即可。
本教學操作環境：Windows10系統、react18.0.0版、Dell G3電腦。
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傳遞一個方法，方法名為changeCompleted。同時也把父元件的陣列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.子元件的按鈕觸發父元件的事件changeCompleted並且從子元件帶來了按鈕對應陣列元素的id值，用來更改對應id數組元素中的completed值。
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 這裡就成功透過子元件傳過來的id修改了對應陣列元素的completed值，使其可以在true和false之間切換。
推薦學習：《react影片教學》
以上是react怎麼改變數組中的某個元素的詳細內容。更多資訊請關注PHP中文網其他相關文章！
