未在reactJS挂钩中的存在状态列表变量中添加新项

问题描述

我正在使用ReactJs Hooks，我有两个状态数组变量，其中一个包含我正在按布尔值过滤的项目列表，并且想添加到另一个状态数组变量中，我尝试了许多不工作的方式，仅添加最后一个项目仅使用arr.Push（）循环的循环

• arr.concat（）
• setlstRolePageMapping（[... lstRolePageMapping，arr）;
• arr.push（）

---

k

以下代码不起作用

const handleAdd = () => {

    let arr = [];  

    for (let data of lstPage) {

        if (data.Select) {               

            objRolePage.Flag = "INSERT" ;

            objRolePage.RoleId = 2 ;

            objRolePage.PageId = data.PageId;

            objRolePage.UpdatedBy = 775 ; 

            arr.push(objRolePage); 

        }  

     }

     console.log(JSON.stringify(arr));   

}

解决方法

也将ES用于第二个数组（第12行）

1.    let arr = [];  
2.    for ( let data of lstPage) {
3.        if (data.Select) {               
4.            objRolePage.Flag = "INSERT" ;
5.            objRolePage.RoleId =2 ;
6.            objRolePage.PageId = data.PageId;
7.            objRolePage.UpdatedBy = 775 ; 
8.            arr.push(objRolePage); 
9.        }  
10.     }
11.    setlstRolePageMapping([...lstRolePageMapping,...arr]); // <=== new line
12.    console.log(JSON.stringify(arr));

,

这里的问题是，您为每次循环运行（objRolePage）重用同一对象。将其推送到数组不会复制该副本，因此最终会推送同一对象，然后在下一次循环运行中对其进行修改。

您可以通过在每次循环运行时重置objRolePage来解决该问题，例如：

let arr = [];  

for (let data of lstPage) {
    if (data.Select) {               
        const objRolePage = {
            Flag: 'INSERT',RoleId: 2,PageId: data.PageId,UpdatedBy: 775,};
        arr.push(objRolePage);
    }  
}