首页 > 解决方案 > Reset React contexts after use

问题描述

In my project, there are several elements rendered in the page. I've been using useContext to update certain elements when changes occur. For example, when the user edits a role with the EditRole component, the updatedRole context is set to that role's new value. The RoleList component has a useEffect that runs when updatedRole changes. It checks if the context has an id attribute. If it does, it searches the list for the old role and updates it. Afterwards, the context is set an empty object, the same as its default value.

However, there are cases in which the two useStates that should run based on the same context. The problem is that I'm not sure if, by setting a context to an empty object in one useEffect, the other one will be affected. And if it isn't affected, I won't be sure if that was just an exception (like, if was a variation in processing speed or order, or something of the sort).

Do the multiple sets make any difference, and, if it does, what should I do?

Here is the part of the code in RoleEdit.js that sets the context.

const response = await api.put
(
    "/groupidupdatesimp",
    {
        name: group.name,
        roles: group.roles,
        owner: currentCentral._id
    },
    {
        params:
        {
            _id: group._id
        }
    }
);
if (response.data === "")
{
    setMessage (`Já existe um grupo com o nome ${group.name}.`);
}
else
{
    setUpdatedGroup (group);
    setMessage (`O grupo ${group.name} foi atualizado.`);
}

Here is the part of the code in RoleList.js that uses the context.

useEffect
(
    () =>
    {
        if (updatedGroup.hasOwnProperty ("_id"))
        {
            groups.map
            (
                (group, index) =>
                {
                    if (group._id === updatedGroup._id)
                    {
                        var tempGroup = groups;
                        tempGroup[index] = updatedGroup;
                        setGroups (tempGroup);
                        setUpdate (update+1);
                    }
                }
            )
        }
    },
    [updatedGroup]
);

标签: reactjsreact-hooksuse-effectuse-context

解决方案


推荐阅读