On my site there is a list of devices with their brief description (made in the form of a table). Information about devices is stored in the firestore.

The user can delete any device, respectively, the device will not be displayed to the user and will be deleted from the database (firestore)

Removing the device is as follows:

1. the user clicks on the delete button;

2. a window opens (something similar to a modal window made using Dialog mui) with a warning about the danger of deletion and two buttons: cancel and confirm;

   2a) when you click on the cancel button, the window closes and you can continue to work on the site;

   2b) pressing the confirmation button starts the deletion process, which is accompanied by a scroll wheel. After removing the device, the window closes and a notification should appear that the operation was completed successfully.

With the appearance of a notification that the operation was completed successfully, I had serious problems.

What am I doing:

1. I created the state const[notificationShown, setNotificationShown] = useState(false);

2. Further I switch this state setNotificationShown(true);

3. And if notificationShown it is true, then I display the inscription about the successful removal.

But for some reason, notificationShown never switches to true, and accordingly, a record of successful deletion is not displayed.

My suspicion is that it has something to do with await deleteItem(item, firestore, urlParams); Let me explain: I put await before deleteItem, since the size of the file that contains information about the device is always different and, accordingly, the deletion time will always be different

export function DeleteButton({ item }) {
  const { urlParams } = useContext(PageContext)
  const { firestore } = useContext(AppContext)

  const [alertShown, setAlertShown] = useState(false);
  const [alertLoading, setAlertLoading] = useState(false);

  // The state that is responsible for notification of successful deletion
  const [notificationShown, setNotificationShown] = useState(false);


  const onNo = () => {
    setAlertShown(false);
  };

  const onYes = async () => {
    setAlertLoading(true);

    try {
      // Removes an entry from the firestore
      await deleteItem(item, firestore, urlParams);
      
      // Should toggle notificationShown to true and 
      // use setTimeout to hold the notification for two seconds
      setNotificationShown(true);
      setTimeout(() => {
        setNotificationShown(false);
      }, 2000); 

      setAlertShown(false);
    }  finally {
      setAlertLoading(false);
    }
  };

  
  return <ButtonGroup >

            {/* Responsible for the appearance of an inscription about the successful removal */}
            {notificationShown && (<span>The item was removed successfully</span>)} 

            <div onClick={() => setAlertShown(true)}>
                  <DeleteForeverIcon sx={{color: "#ff5141", marginRight: "5px"}}/>
              </div>

            {alertShown && (
                <Dialog open={onYes}>

                    <DialogTitle>Do you want to delete record?</DialogTitle>

                    <DialogContentText>
                       record will be removed from firestore
                    </DialogContentText>

                    {alertLoading 
                        ? <div>
                            <LabledSpinner/>
                          </div>
        
                        : <DialogActions>
                            <Button   onClick={onNo}>Cancel</Button >
                            <Button   onClick={onYes}>Confirm </Button >
                          </DialogActions>}
                     
                                       
                </Dialog>
                )}        
    </ButtonGroup>
}

Please help me figure out what could be the reason.

CodePudding user response：

setState is asynchronous and so notificationShown won't update until the next re-render.

useEffect allows you to run a code block on a state change and could be what you're after, see below.

  const onYes = async () => {
    setAlertLoading(true);

    try {
      // Removes an entry from the firestore
      await deleteItem(item, firestore, urlParams);
      
      // Should toggle notificationShown to true 
      setNotificationShown(true);

      setAlertShown(false);
    }  finally {
      setAlertLoading(false);
    }
  };

  useEffect(() => {
    // use setTimeout to hold the notification for two seconds
    setTimeout(() => {
      setNotificationShown(false);
    }, 2000);
  }, [notificationShown]);

More described previous answer, The useState set method is not reflecting a change immediately.

CodePudding user response：

I think Dialog props is wrong. Type of open is boolean. Not () => Promise<void>.

<Dialog open={alertShown}>

    <DialogTitle>Do you want to delete record?</DialogTitle>

    <DialogContentText>
        record will be removed from firestore
    </DialogContentText>

    {alertLoading 
        ? <div>
            <LabledSpinner/>
          </div>

        : <DialogActions>
            <Button   onClick={onNo}>Cancel</Button >
            <Button   onClick={onYes}>Confirm </Button >
          </DialogActions>}
      
                        
</Dialog>

mui Dialog docs