reactjs - 即使在超时后反应使用状态设置方法也不会改变值
问题描述
我有一种情况,useState 的 set 方法没有改变值。我知道这是一个异步函数,所以我将 set 方法放在超时函数中,然后在控制台日志中输出值以检查值。我在另一个超时函数中将相同的值输出到控制台日志,两者都有 5 秒的等待时间。服务器上没有其他任何东西在运行。
代码片段如下。不起作用的设置方法是“setGroupUsersRemoved(userListToRemove)”。我在两个地方都有这个,一个是我希望它运行的地方,另一个是超时。api remove 调用按照控制台日志的见证执行,因此这不是问题。我在代码中有另外两个(useState)设置方法,它们都工作正常。
控制台日志显示变量 userListToRemove 的值在数组中有 3 个条目,但变量 groupUsersRemoved 永远不会被设置。
感谢任何关于我可能做错的想法。
这是我的初始化。
const [groupUsersRemoved,setGroupUsersRemoved] = useState([]);
这是我使用 setMethod 的代码
const deleteGroup = (idToDelete) => {
const indexToDelete = findMatchingIndex(idToDelete);
console.log("GroupAccessForm - indexToDelete = " + indexToDelete );
if (indexToDelete >= 0)
{
if (groupAccessListing[indexToDelete].owner_id === userId )
{
console.log("GroupAccessForm - deleteGroup() - userList = ", groupAccessListing[indexToDelete].userList );
let userListToRemove = []
for (let i =0; i<groupAccessListing[indexToDelete].userList.length; i++)
{
userListToRemove.push(groupAccessListing[indexToDelete].userList[i].id);
}
console.log("GroupAccessForm - deleteGroup() - userListToRemove = ", userListToRemove );
setGroupUsersRemoved(userListToRemove);
console.log("GroupAccessForm - deleteGroup() - selected = " + selected );
remove(
{ groupId: idToDelete},
{t: jwt.token}).then((data) => {
if (data.error) {
console.log(data.error)
setNotify({
isOpen: true,
message: "Group not removed! Please try again.. Notify Administrator if problem persists.",
type: "error",
});
} else {
console.log("GroupAccessForm - deleteGroup() - idToDelete = " + idToDelete );
if (indexToDelete >= 0)
{ console.log("GroupAccessForm - deleteGroup() - indexToDelete >=0 = " + indexToDelete );
setGroupAccessListing ( [...groupAccessListing.slice(0, indexToDelete), // everything before current post
...groupAccessListing.slice(indexToDelete + 1)]) // everything after current post
setGroupAccessListingPreFilter ( [...groupAccessListingPreFilter.slice(0, indexToDelete), // everything before current post
...groupAccessListingPreFilter.slice(indexToDelete + 1) ])// everything after current post
console.log("GroupAccessForm - deleteGroup() - userList = " + groupAccessListing[indexToDelete].userList );
setTimeout(() => {
console.log("GroupAccessForm - deleteGroup() - userListToRemove = ", userListToRemove );
console.log("GroupAccessForm - deleteGroup() - groupUsersRemoved = ", groupUsersRemoved );
setGroupUsersRemoved(userListToRemove);
}, 5000);
setTimeout(() => {
console.log("GroupAccessForm - deleteGroup() - userListToRemove = ", userListToRemove );
console.log("GroupAccessForm - deleteGroup() - groupUsersRemoved = ", groupUsersRemoved );
removeGroupsFromUserMembership(idToDelete);
}, 5000);
}
}
})
}
}
解决方案
我能够通过调用另一个运行 set 方法的函数来解决。代码如下。
const trackUsersAddedAndRemoved = (addedOrRemoved, idChanged) => {
const addIndex = findIdInArray(groupUsersAdded, idChanged);
const removeIndex = findIdInArray(groupUsersRemoved, idChanged);
console.log("GroupAccessForm -trackUsersAddedAndRemoved-before Add/remove-groupUsersAdded", groupUsersAdded);
console.log("GroupAccessForm -trackUsersAddedAndRemoved-before Add/remove-groupUsersRemoved", groupUsersRemoved);
console.log("GroupAccessForm -trackUsersAddedAndRemoved-addedOrRemoved", addedOrRemoved);
console.log("GroupAccessForm -trackUsersAddedAndRemoved-idChanged", idChanged);
let newAddUsersTogroup = groupUsersAdded;
let newRemoveUsersFromGroup = groupUsersRemoved
if (addedOrRemoved ==="Add")
{
if (addIndex < 0)
{
newAddUsersTogroup.push(idChanged);
}
if (removeIndex >= 0)
{
newRemoveUsersFromGroup.splice(removeIndex,1)
}
} else if (addedOrRemoved ==="Remove")
{
if (removeIndex < 0)
{
newRemoveUsersFromGroup.push(idChanged);
}
if (addIndex >= 0)
{
newAddUsersTogroup.splice(addIndex,1)
}
}
setGroupUsersAdded(newAddUsersTogroup);
setGroupUsersRemoved(newRemoveUsersFromGroup);
}
推荐阅读
- python - 绘制多列的 seaborn 箱线图并与标准比例进行比较
- haskell - 如何在 Haskell 中打印列表的最后一个元素?
- javascript - 遍历一个对象,只返回某些键及其值
- python - 如何在PANDAS中“默认”更改列顺序?
- java - mvn clean 失败并出现错误“无法删除类”
- airflow - 气流任务是否可以发送上游失败的错误电子邮件通知?
- fortran - 请求的处理器多于允许的数量
- oracle - OCI 和 Azure - 如何通过 Azure APIM 保护 OCI 托管 API
- python - 如何使用 python 编程更改预先存在的 Excel 工作表中的文本对齐方式?
- python - Pandas 按列和掩码索引