重庆分公司
重庆分公司，新征程启航
为企业提供网站建设、域名注册、服务器等服务
react如何改变数组中的某个元素
这篇“react如何改变数组中的某个元素”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“react如何改变数组中的某个元素”文章吧。
成都创新互联主要从事网站制作、做网站、网页设计、企业做网站、公司建网站等业务。立足成都服务鄂托克,10年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18982081108
react改变数组中的某个元素的方法：1、查看父组件App和子组件ToDoList；2、在子组件中循环展示来自父组件的数组ToDoList，并且让两个按钮取到对应的数组元素id；3、通过子组件传过来的id修改对应数组元素的completed值即可。
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传过去。
changeTitle={this.changeCompleted}
listDelete={this.listDelete}
>
1.3 子组件中循环展示来自父组件的数组ToDoList，并且让两个按钮取到对应的数组元素id。
import React, { Component } from 'react'
import './ToDoList.css'
export default class ToDoList extends Component {
render() {
return (
{
this.props.ToDoList.map((item)=>{
return
{item.title}
{item.completed?'已完成':'未完成'}
//根据id改变父组件中ToDoList数组的数组元素的Completed的值
切换状态
//根据id删除父组件中ToDoList数组的数组元素
删除
})
}
)
}
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如何改变数组中的某个元素
文章链接：http://cqcxhl.com/article/pogpsi.html