javascript - 当我更改状态值并将给状态的内容发送到 Firestore 时，状态会在 if/else 中重置为旧值

Question

所以我有一个搜索栏，可以为我提供用户。然后我可以单击“添加朋友”，它会变为“取消”，而该用户变为“取消”和“确认”，如果我在单个用户上尝试，一切正常。但是一旦我找到 2 个用户，第一个用户点击添加朋友工作正常，而第二个用户点击添加朋友将状态设置为取消，并立即返回到旧的“添加朋友”值，但它会将预期值添加到 firestore。然后，如果我再次单击它，它会按预期工作。

尝试将 useEffect 中的所有内容都设置为超时，但是单击后它应该显示“取消”，并且由于其他内部使用效果仍然跳回“添加朋友”。

问题是如何在不跳入旧值的情况下使其工作。

const FoundUser = ({ user }) => {
  const { addFriend, peopleFound } = useData();
  const [status, setStatus] = useState("Add Friend");

  // if any data is found in peopleFound and coresponds to usersId that was searched for, it will set data in status state.
  useEffect(() => {
    peopleFound.forEach((u) => {
      if (user.userId === Object.keys(u.data())[0]) {
        setStatus(Object.values(u.data())[0]);
      } 
// without else it works fine to add several friends on first try, but for user on another end problems 
// occur that if friend request was canceled it is still shown to him until rerender. 
else {
        setStatus("Add Friend");
        console.log("1");
      }
    });
  }, [peopleFound]);

  const changeStatus = () => {
    switch (status) {
      case "Add Friend":
        console.log("2");
        setStatus("cancel");
        addFriend(user.userId, "Add Friend");
        break;
      case "cancel":
        setStatus("Add Friend");
        addFriend(user.userId, "cancel");
        break;
      case "confirm":
        setStatus("friends");
        addFriend(user.userId, "friends");
        break;
      case "friends":
        return;
    }
  };

  return (
    <div className="foundUser">
      <div className="foundUser">
        <UserPhoto size="30px" userPhoto={user.smallProfilePhoto} />
        <h5>{user.UserName}</h5>
      </div>
      <div style={{ width: "max-content", marginLeft: "auto" }}>
        {status === "confirm" ? (
          <button
            className="requestFriend"
            onClick={() => {
              addFriend(user.userId, "cancel");
              setStatus("Add Friend");
            }}
          >
            Cancel
          </button>
        ) : (
          <></>
        )}
        <button onClick={changeStatus} className="requestFriend">
          {status}
        </button>
      </div>
    </div>
  );
};
export default FoundUser;
```js

标签： javascriptreactjsgoogle-cloud-firestore