React useState 中的数组：性能问题

Question

目前，我正在实现用户编辑/创建表单。 我将用户的所有信息保持在一种状态，因此我可以将其发送到后端。

我的代码如下所示：

const UserEditPage = () => {
    const [user, setUser] = useState();
    const [roles, setRoles] = useState([]);
}

const roleOnChange = (event, value) => {
    if (user.roles.find(role => role === value)) {
        setUser({ ...user, roles: user.roles.filter(role => role !== value) });
    } else {
        setUser({ ...user, roles: [...user.roles, value] });
    }
}

useEffect(() => {
    getRoles().then(res => {
        setRoles(res.data);
    }
}, []);

return (
<div>
    {roles.map(role => {
        <input type="checkbox" onChange={event => roleOnChange(event, role.id)}
            checked={user.roles.find(userRole => userRole === role.id)} />
    })}
</div>
)

问题是当我单击复选框时，它们通常不会被选中或取消选中。

我认为问题是之前的 setUser 函数没有完全完成，并且看不到新值。 我需要做什么来解决这个问题？

Answer 1

是的，它可能是......无论如何，如果你有一组值并且你需要在其中搜索一些值 - 最好使用一些索引对象而不是数组。 例如设置。 代码将是

const UserEditPage = () => {
    const [user, setUser] = useState();
    const [roles, setRoles] = useState([]);
}

const roleOnChange = (event, value) => {
    const action = user.roles.has(value) ? 'delete' : 'add'
    user.roles[action](value)
    setUser({ ...user, roles: new Set(user.roles) });
}

return (
<div>
    {roles.map(role => {
        <input type="checkbox" onChange={event => roleOnChange(event, role.id)}
            checked={user.roles.has(role.id)} />
    })}
</div>
)

甚至当你使用数组时，要了解它是否有一些价值，最好使用包含方法，因为它比 find 方法工作得更快，在这种情况下更有意义

user.roles.includes(value)

Answer 2

我可以看到的一个问题是，在每次渲染时，您计算了 N 次checked框的checked属性，其中 N 是用户数量。

这意味着如果您有 5 个角色和 5 个用户，您将在每次渲染时计算 5*5 倍的检查属性。

您可以使用根据角色 ID 保存选中值的对象，并且每次选中更改时，您只更改一次对象的值。 例如

const [checkedHolder, updateCheckedHolder] = useState({role1: false, role2: false})

...

<input {...otherProps} checked={checkedHolder[roleId])} onChange={updateCheckedRoles[roleId]} />

和使用转换器功能：

我相信这会大大提高您的性能，因为您不必在每次渲染时迭代角色。