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怎么改变数组中的某个元素的详细内容。