为什么反应中的状态钩子会改变对象的所有元素？

Question

我有一个成员列表，每个成员都有相同的应用程序集。我创建了 2 类来关联每个成员和应用程序，最后得到了我在初始状态下编写的成员和应用程序的一般列表。然后，使用该函数，我获得了被单击的成员的 ID，并且我想将其特定应用程序的状态从 false 更改为 true。但是我将应用程序的状态从 false 更改为适用于所有成员。为什么会这样，哪里会出错？？？

列出成员

let teamMembers = [
{ 'idMember': 0, 'name': 'John Littel', 'email': 'Delores_Barrows5@hotmail.com' },
{ 'idMember': 1, 'name': 'Tom Hamill', 'email': 'Luigi0@gmail.com' },
{ 'idMember': 2, 'name': 'Ann Quitzonl', 'email': 'AnnQ@hotmail.com' },
{ 'idMember': 3, 'name': 'Frances Schuster', 'email': 'Frances.Schuster@yahoo.com' },
{ 'idMember': 4, 'name': 'Morrison Mohr', 'email': 'Rafael.Hilll64@yahoo.com' }

];

列出应用程序：

let appsFromBase = ['App 0', 'App 1', 'App 2', 'App 3', 'App 4'];

class Application {
constructor(idApp, isSelected, appName) {
    this.idApp = idApp;
    this.isSelected = isSelected;
    this.appName = appName;
}

toggleSelected() { *this method changed apps from false => true*
    this.isSelected = !this.isSelected
}

};

const apps = appsFromBase.map((app, i) => new Application(i, false, app));
const membersObject = teamMembers.map((member, i) => new Member(i, member.name, member.email, apps));

状态：

const [members, setMembers] = useState(membersObject);

处理方法：

    const handleChoosenApp = (app, member_i) => {
    let newMembers = { ...members };

    let _id = app.idApp;

    if (_id !== 'btn-all-app') {
        let myUpdatingMember = newMembers[member_i].apps[_id].toggleSelected()

        setMembers({ ...newMembers });
    }

}

member_i, _id - 这是会员的ID和他的申请，是从界面点击的，他需要把值从true改成false 在控制台 myUpdatingMember 我得到了我需要的成员和应用程序，但是为什么每个人的状态都改变了？？？

Answer 1

所选状态是应用程序的属性，而不是成员。

您创建一个 Application 数组并将其传递给每个 Member 构造函数。

您创建的每个 Member 对象共享同一个 Application 数组。

为什么反应中的状态钩子会改变对象的所有元素？

Why the state hook in react changes all elements of the object?

javascript

reactjs

use-state