node.js - 反应 - 来自后端的初始状态 - 乐观的 UI

Question

我当前的节点/反应应用程序工作正常，但它有审美问题，改变状态需要太长时间。非常简单的例子：绿色按钮只有绿色，因为它从后端获取信息。当我单击按钮时，它会等待后端的响应，以便再次变为红色。

我希望这些按钮立即改变颜色，而无需等待后端。但是，仍然将数据发送到后端。

获取请求：

  useEffect(() => {
    const url = `/api/user/${localStorageUserId}`;
    fetch(url)
      .then((res) => res.json())
      .then((checkedInUser) => {
        setDbUserId(checkedInUser?.checkedInUserMongoId);
        checkInState(dbUserId);
      })
      .catch((error) => {
        console.error(error);
      });
  }, [dbUserId, checkOutState, localStorageUserId, updatePage, checkInState]);

按钮：

const [dbUserId, setDbUserId] = useState(null);

  <CheckInButton
                    handleCheckInButton={() =>
                      handleCheckInButton(positionData)
                    }
                    data={positionData}
                    isDisabled={dbUserId ? true : false}
               
                  />

签到功能：

  function handleCheckInButton(clickedPlaced) {
    const urlPlace = `/api/place/${clickedPlace?._id}`;
    const patchMethodCheckin = {
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        userId: localStorageUserId,
      }),
    };
    fetch(urlPlace, patchMethodCheckin)
      .then((res) => {
        res.json();
      })
      .then(() => {
        setUpdatePage(!updatePage);
        toast.success(
          "Successfully checked in",
          {
            duration: 4000,
          }
        );
      })
      .catch((error) => {
        toast.error(
          "Something went wrong"
        );
        console.error(error);
      });
  }

如果您有任何问题，请随时提问！

提前感谢您的努力。