Reactで配列の要素を変更する方法

react で配列の要素を変更する方法: 1. 親コンポーネント App と子コンポーネント ToDoList を表示します; 2. 子コンポーネントをループして親コンポーネントから配列 ToDoList を表示し、 2 つのボタンは、対応する配列要素 ID を取得します; 3. サブコンポーネントから渡された ID を使用して、対応する配列要素の完成した値を変更します。

このチュートリアルの動作環境: Windows 10 システム、react18.0.0 バージョン、Dell G3 コンピューター。

反応で配列の要素を変更するにはどうすればよいですか? ID で対応する配列要素を変更する方法

React ID:

1 で対応する配列要素を変更します。ここには、親コンポーネント App と子コンポーネントの 2 つのコンポーネントがあります。 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 に渡し、メソッド名前の変更が完了しました。同時に親コンポーネントの配列ToDoListも渡します。

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

1.3 子コンポーネントのループで親コンポーネントからの配列 ToDoList を表示し、2 つのボタンに対応する配列要素 ID を取得させます。

import React, { Component } from 'react'
import './ToDoList.css'
export default class ToDoList extends Component {
    render() {
        return (
            <div className=&#39;ToDoList&#39;>
                <ul>
                    {
                        this.props.ToDoList.map((item)=>{
                        return <li key={item.id}>
                            {item.title}
                            <p>{item.completed?&#39;已完成&#39;:&#39;未完成&#39;}</p>
                            <div>
                            //根据id改变父组件中ToDoList数组的数组元素的Completed的值
                            <button className=&#39;btn1&#39; id={item.id} onClick={this.changeCompleted}>切换状态</button>
                            //根据id删除父组件中ToDoList数组的数组元素
                            <button className=&#39;btn2&#39; 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 配列要素。

  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 を通じて正常に変更され、true と false の間で切り替えることができます。

推奨される学習: 「react ビデオ チュートリアル 」

以上がReactで配列の要素を変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。