本教程操作环境：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中文网其它相关文章！

推荐内容