Question

我遇到了 useState 的 set 方法没有改变值的情况。我知道这是一个异步函数，所以我将 set 方法放在超时函数中，然后在控制台日志中输出值以检查值。我将相同的值输出到另一个超时函数中的控制台日志，两者都有 5 秒的等待时间。服务器上没有运行其他任何东西。

代码截图如下。不起作用的设置方法是“setGroupUsersRemoved(userListToRemove)”。我在两个地方都有这个，一个是我希望它运行的地方，另一个是超时的地方。 api remove 调用按照控制台日志的方式执行，因此这不是问题。我在代码中有另外两个 (useState) set 方法，它们都运行良好。

控制台日志显示变量 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);                     
            } 
        
          }
        })
      }
  }

Answer 1

对要控制的状态使用 useEffect 钩子。

useEffect(()=> {
    /* do something when groupUsersRemoved state changed */ 
}, [groupUsersRemoved])

你还可以通过将他们的名字放在数组中来监听其他状态的变化，数组是 useEffect 的第二个参数。

Answer 2

我能够通过调用另一个运行 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);
  }

React usestate set 方法即使在超时后也不会改变值

2 个答案: